{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"switch-cards","type":"registry:component","title":"Switch cards","description":"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.","author":"GetUrUI ","dependencies":["motion","lucide-react"],"registryDependencies":[],"files":[{"path":"registry/geturui/examples/switch-cards/notifications.tsx","type":"registry:component","target":"components/examples/switch-cards/notifications.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { BellOff, Check, Mail, Smartphone } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface NotificationSetting {\n id: string;\n label: string;\n description: string;\n channel: \"email\" | \"push\";\n enabled: boolean;\n}\n\nexport interface NotificationSwitchCardProps {\n title?: string;\n settings?: NotificationSetting[];\n onChange?: (id: string, enabled: boolean) => void;\n className?: string;\n}\n\nconst SETTINGS: NotificationSetting[] = [\n { id: \"mentions\", label: \"Mentions and replies\", description: \"When someone @mentions you or replies to your thread.\", channel: \"email\", enabled: true },\n { id: \"digest\", label: \"Weekly digest\", description: \"A Monday summary of activity in your projects.\", channel: \"email\", enabled: true },\n { id: \"product\", label: \"Product updates\", description: \"New features and changes, about once a month.\", channel: \"email\", enabled: false },\n { id: \"assigned\", label: \"Assigned to you\", description: \"New tasks and reviews that need your input.\", channel: \"push\", enabled: true },\n { id: \"deploys\", label: \"Deploy status\", description: \"Builds that fail or finish on production.\", channel: \"push\", enabled: false },\n];\nconst GROUPS = [\n { channel: \"email\", label: \"Email\", Icon: Mail },\n { channel: \"push\", label: \"Push\", Icon: Smartphone },\n] as const;\nconst spring = { type: \"spring\", stiffness: 520, damping: 32 } as const;\n\n/** Accessible switch with a springy thumb that stretches while pressed. */\nfunction Switch({ checked, onToggle, labelledBy, describedBy }: { checked: boolean; onToggle: () => void; labelledBy: string; describedBy: string }) {\n return (\n \n \n \n );\n}\n\n/** Notification preferences grouped by channel; each switch springs and a quiet \"Saved\" confirmation fades in. */\nexport function NotificationSwitchCard({ title = \"Notifications\", settings = SETTINGS, onChange, className }: NotificationSwitchCardProps) {\n const reduce = useReducedMotion();\n const uid = React.useId();\n const [state, setState] = React.useState(() => Object.fromEntries(settings.map((s) => [s.id, s.enabled])));\n const [saved, setSaved] = React.useState(0);\n const allOff = settings.every((s) => !state[s.id]);\n\n React.useEffect(() => {\n if (!saved) return;\n const t = setTimeout(() => setSaved(0), 1800);\n return () => clearTimeout(t);\n }, [saved]);\n\n function toggle(id: string) {\n const next = !state[id];\n setState((s) => ({ ...s, [id]: next }));\n setSaved((n) => n + 1);\n onChange?.(id, next);\n }\n\n return (\n
\n
\n
\n

{title}

\n

Choose what reaches you and where.

\n
\n

\n \n {saved > 0 && (\n \n \n Saved\n \n )}\n \n

\n
\n\n {GROUPS.map(({ channel, label, Icon }) => (\n
\n

\n \n {label}\n

\n
    \n {settings.filter((s) => s.channel === channel).map((s) => (\n
  • \n
    \n

    {s.label}

    \n

    {s.description}

    \n
    \n toggle(s.id)} labelledBy={`${uid}-${s.id}`} describedBy={`${uid}-${s.id}-d`} />\n
    • \n ))}\n
\n
\n ))}\n\n \n {allOff && (\n \n \n \n All notifications are off. You may miss mentions and failed deploys.\n \n \n )}\n \n
\n );\n}\n"},{"path":"registry/geturui/examples/switch-cards/plan-features.tsx","type":"registry:component","target":"components/examples/switch-cards/plan-features.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { Check, LoaderCircle, Lock } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PlanFeature {\n id: string;\n label: string;\n description: string;\n enabled: boolean;\n /** Id of the feature this one depends on. */\n parent?: string;\n /** Plan needed to use it; renders a locked row. */\n requires?: string;\n}\n\nexport interface PlanFeatureCardProps {\n workspace?: string;\n features?: PlanFeature[];\n onSave?: (values: Record) => void | Promise;\n onUpgrade?: (plan: string) => void;\n className?: string;\n}\n\nconst FEATURES: PlanFeature[] = [\n { id: \"public\", label: \"Public links\", description: \"Anyone with the link can view shared pages.\", enabled: true },\n { id: \"password\", label: \"Require a password\", description: \"Visitors enter a password before viewing.\", enabled: false, parent: \"public\" },\n { id: \"index\", label: \"Allow search engines\", description: \"Let public pages appear in search results.\", enabled: false, parent: \"public\" },\n { id: \"ai\", label: \"Writing assistant\", description: \"Draft, summarize and rewrite inside docs.\", enabled: false },\n { id: \"ai-train\", label: \"Learn from workspace\", description: \"Use your docs to improve suggestions for your team.\", enabled: false, parent: \"ai\" },\n { id: \"sso\", label: \"SAML single sign-on\", description: \"Sign in through Okta, Entra ID or Google Workspace.\", enabled: false, requires: \"Business\" },\n];\nconst spring = { type: \"spring\", stiffness: 520, damping: 32 } as const;\nconst soft = { type: \"spring\", stiffness: 320, damping: 30 } as const;\n\nfunction Switch({ checked, disabled, onToggle, labelledBy, describedBy }: { checked: boolean; disabled?: boolean; onToggle: () => void; labelledBy: string; describedBy: string }) {\n return (\n \n \n \n );\n}\n\n/** Workspace feature toggles where child options unlock with their parent, locked features show the plan they need, and a save bar springs in once something changes. */\nexport function PlanFeatureCard({ workspace = \"Northwind Studio\", features = FEATURES, onSave = () => new Promise((r) => setTimeout(r, 900)), onUpgrade, className }: PlanFeatureCardProps) {\n const reduce = useReducedMotion();\n const uid = React.useId();\n const initial = React.useMemo(() => Object.fromEntries(features.map((f) => [f.id, f.enabled])), [features]);\n const [base, setBase] = React.useState(initial);\n const [values, setValues] = React.useState(initial);\n const [status, setStatus] = React.useState<\"idle\" | \"saving\" | \"saved\">(\"idle\");\n const dirty = features.filter((f) => values[f.id] !== base[f.id]).length;\n\n async function save() {\n setStatus(\"saving\");\n await onSave(values);\n setBase(values);\n setStatus(\"saved\");\n setTimeout(() => setStatus(\"idle\"), 1600);\n }\n\n return (\n
\n
\n

Features

\n

Applies to everyone in {workspace}.

\n
\n
    \n {features.filter((f) => !f.parent).map((f) => {\n const children = features.filter((c) => c.parent === f.id);\n const on = !!values[f.id];\n return (\n
  • \n setValues((v) => ({ ...v, [f.id]: !on }))} onUpgrade={onUpgrade} />\n {children.length > 0 && (\n \n {children.map((c) => (\n
  • \n setValues((v) => ({ ...v, [c.id]: !v[c.id] }))} />\n
    • \n ))}\n \n {!on && (\n \n Turn on {f.label.toLowerCase()} to change these.\n \n )}\n \n \n )}\n \n );\n })}\n
\n \n {(dirty > 0 || status !== \"idle\") && (\n \n
\n

\n {status === \"saved\" ? (\n Changes saved\n ) : (\n `${dirty} unsaved ${dirty === 1 ? \"change\" : \"changes\"}`\n )}\n

\n {status !== \"saved\" && (\n
\n \n \n {status === \"saving\" && }\n Save changes\n \n
\n )}\n
\n \n )}\n \n
\n );\n}\n\nfunction Row({ f, uid, checked, disabled, onToggle, onUpgrade }: { f: PlanFeature; uid: string; checked: boolean; disabled: boolean; onToggle: () => void; onUpgrade?: (plan: string) => void }) {\n return (\n
\n
\n

\n {f.label}\n {f.requires && (\n \n \n {f.requires}\n \n )}\n

\n

\n {f.description}\n {f.requires && (\n <>\n {\" \"}\n \n \n )}\n

\n
\n \n
\n );\n}\n"},{"path":"registry/geturui/examples/switch-cards/privacy.tsx","type":"registry:component","target":"components/examples/switch-cards/privacy.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { ShieldAlert, ShieldCheck } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PrivacySetting {\n id: string;\n label: string;\n description: string;\n enabled: boolean;\n /** Ask before turning this off; the text explains the consequence. */\n confirmOff?: string;\n}\n\nexport interface PrivacySwitchCardProps {\n settings?: PrivacySetting[];\n onChange?: (id: string, enabled: boolean) => void;\n className?: string;\n}\n\nconst SETTINGS: PrivacySetting[] = [\n { id: \"presence\", label: \"Show when I’m online\", description: \"Teammates see a green dot next to your name.\", enabled: true },\n { id: \"receipts\", label: \"Read receipts\", description: \"Let people know when you’ve read their message.\", enabled: false },\n { id: \"analytics\", label: \"Share usage data\", description: \"Anonymous diagnostics that help us fix bugs faster.\", enabled: true },\n { id: \"alerts\", label: \"Sign-in alerts\", description: \"Email me when a new device signs in.\", enabled: true, confirmOff: \"You won’t hear about sign-ins from new devices, including ones that aren’t yours.\" },\n { id: \"2fa\", label: \"Two-step verification\", description: \"Ask for a code from your authenticator app.\", enabled: true, confirmOff: \"Anyone with your password could sign in. We recommend keeping this on.\" },\n];\nconst spring = { type: \"spring\", stiffness: 520, damping: 32 } as const;\nconst soft = { type: \"spring\", stiffness: 320, damping: 30 } as const;\n\n/** Privacy settings where risky switches ask first: turning one off springs open an inline confirmation that holds focus until you choose. */\nexport function PrivacySwitchCard({ settings = SETTINGS, onChange, className }: PrivacySwitchCardProps) {\n const reduce = useReducedMotion();\n const uid = React.useId();\n const [state, setState] = React.useState(() => Object.fromEntries(settings.map((s) => [s.id, s.enabled])));\n const [pending, setPending] = React.useState(null);\n const switchRefs = React.useRef>({});\n const keepRef = React.useRef(null);\n const protectedCount = settings.filter((s) => s.confirmOff && state[s.id]).length;\n const totalProtected = settings.filter((s) => s.confirmOff).length;\n\n React.useEffect(() => {\n if (pending) requestAnimationFrame(() => keepRef.current?.focus());\n }, [pending]);\n\n function set(id: string, value: boolean) {\n setState((s) => ({ ...s, [id]: value }));\n onChange?.(id, value);\n }\n\n function toggle(s: PrivacySetting) {\n if (state[s.id] && s.confirmOff) return setPending(pending === s.id ? null : s.id);\n setPending(null);\n set(s.id, !state[s.id]);\n }\n\n function resolve(turnOff: boolean) {\n if (!pending) return;\n if (turnOff) set(pending, false);\n switchRefs.current[pending]?.focus();\n setPending(null);\n }\n\n const secure = protectedCount === totalProtected;\n\n return (\n
\n
\n
\n

Privacy and security

\n

Control what others see and how you sign in.

\n
\n \n \n {secure ? : }\n {secure ? \"Protected\" : \"At risk\"}\n \n \n
\n
    \n {settings.map((s) => {\n const on = !!state[s.id];\n const asking = pending === s.id;\n return (\n
  • \n
    \n
    \n

    {s.label}

    \n

    {s.description}

    \n
    \n {\n switchRefs.current[s.id] = el;\n }}\n type=\"button\"\n role=\"switch\"\n aria-checked={on}\n aria-labelledby={`${uid}-${s.id}`}\n aria-describedby={`${uid}-${s.id}-d`}\n aria-expanded={s.confirmOff ? asking : undefined}\n aria-controls={s.confirmOff ? `${uid}-${s.id}-c` : undefined}\n onClick={() => toggle(s)}\n whileTap=\"press\"\n className={cn(\n \"relative inline-flex h-6 w-10 shrink-0 items-center rounded-full border p-[2px] outline-none transition-colors duration-200 focus-visible:shadow-[var(--focus-ring)]\",\n on ? \"border-transparent bg-volt\" : \"border-border-strong bg-surface-sunken\",\n asking && \"ring-2 ring-danger/50\",\n )}\n >\n \n \n
    \n \n {asking && (\n {\n if (e.key !== \"Escape\") return;\n e.stopPropagation();\n resolve(false);\n }}\n className=\"overflow-hidden\"\n >\n
    \n

    \n \n Turn off {s.label.toLowerCase()}?\n

    \n

    {s.confirmOff}

    \n
    \n \n resolve(true)} className=\"h-8 rounded-full border border-danger/50 px-3.5 text-[12.5px] font-medium text-danger outline-none transition-colors hover:bg-danger/10 focus-visible:shadow-[var(--focus-ring)]\">\n Turn off\n \n
    \n
    \n \n )}\n     \n
    • \n );\n })}\n
\n
\n );\n}\n"},{"path":"LICENSE-geturui.md","type":"registry:file","target":"LICENSE-geturui.md","content":"MIT License\n\nCopyright (c) 2026 geturui.com\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"}],"categories":["examples","switch","toggle","settings","preferences","notifications","privacy","features","form"],"meta":{"tier":"free","license":"MIT","docs":"https://geturui.com/docs/switch-cards"}}