Three settings cards built on a springy switch — notification preferences with a saved cue, plan features with dependent options and a save bar, and privacy toggles that ask before turning protection off.
switchtogglesettingspreferencesnotificationsprivacyfeaturesform
Notifications
notifications.tsxEmail and push preferences in labelled groups; the thumb stretches on press and a Saved chip blurs in after each change.
$npx shadcn@latest add @geturui/switch-cards-notifications
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Notifications" | Card heading. |
settings | { id; label; description; channel: "email" | "push"; enabled }[] | — | Rows, grouped by channel. |
onChange | (id: string, enabled: boolean) => void | — | Fires on every toggle. |
className | string | — | Extra classes on the root element. |
Plan features
plan-features.tsxWorkspace feature toggles where child options unlock with their parent, a locked row names its plan, and a save bar springs in once anything changes.
$npx shadcn@latest add @geturui/switch-cards-plan-features
| Prop | Type | Default | Description |
|---|---|---|---|
workspace | string | — | Named in the subtitle. |
features | { id; label; description; enabled; parent?; requires? }[] | — | parent nests a row; requires locks it behind a plan. |
onSave | (values: Record<string, boolean>) => void | Promise<void> | — | Save changes button. |
onUpgrade | (plan: string) => void | — | Upgrade link on locked rows. |
className | string | — | Extra classes on the root element. |
Privacy
privacy.tsxPrivacy and security switches with a Protected or At risk badge; turning off a sensitive one opens an inline confirmation first.
$npx shadcn@latest add @geturui/switch-cards-privacy
| Prop | Type | Default | Description |
|---|---|---|---|
settings | { id; label; description; enabled; confirmOff? }[] | — | confirmOff text makes turning it off ask first. |
onChange | (id: string, enabled: boolean) => void | — | Fires after a change is confirmed. |
className | string | — | Extra classes on the root element. |
Install the whole set
Installs every switch cards variant at once. Each section above has its own command for a single variant.
$npx shadcn@latest add @geturui/switch-cards
Accessibility
- Each switch is a button with role switch and aria-checked, labelled and described by its row text.
- Dependent switches are disabled with a visible reason; locked features name the plan they need.
- Confirmations are inline alertdialogs that take focus, close on Escape and hand focus back to the switch.