Notification settings list with switches.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/settings-list
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { useState } from "react";4import { SettingsSwitches } from "@/components/nextui/settings-list";56export function NotificationSettings() {7const [prefs, setPrefs] = useState({ push: true, digest: false });89return (10<SettingsSwitches11settings={[12{ id: "push", title: "Push notifications", body: "Mentions and direct messages." },13{ id: "digest", title: "Daily digest", body: "One email each morning." },14]}15checked={prefs}16onCheckedChange={(id, value) => setPrefs((p) => ({ ...p, [id]: value }))}17/>18);19}
| Prop | Type | Default | Description |
|---|---|---|---|
| settings | SettingSwitchItem[] | 3 sample email settings | Rows: id, title, body and optional starting state on |
| checked | Record<string, boolean> | – | Controlled state by setting id; leave out to use each row's on |
| onCheckedChange | (id: string, checked: boolean) => void | – | Called when a switch flips |
| className | string | – | Extra classes on the card |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.