{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-4",
  "title": "Section Nav Settings Layout",
  "description": "Settings layout with a left section nav (Profile, Account, Notifications, Billing) that swaps the active section's form cards beside it.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "field",
    "input",
    "separator",
    "switch"
  ],
  "files": [
    {
      "path": "registry/blocks/settings/4/settings-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\nconst sections = [\n  {\n    id: \"profile\",\n    label: \"Profile\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"User\"\n        tabler=\"IconUser\"\n        hugeicons=\"UserIcon\"\n        phosphor=\"User\"\n        remixicon=\"RiUser3Line\"\n        {...p}\n      />\n    ),\n  },\n  {\n    id: \"account\",\n    label: \"Account\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Shield\"\n        tabler=\"IconShieldLock\"\n        hugeicons=\"ShieldKeyIcon\"\n        phosphor=\"ShieldChevron\"\n        remixicon=\"RiShieldKeyholeLine\"\n        {...p}\n      />\n    ),\n  },\n  {\n    id: \"notifications\",\n    label: \"Notifications\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Bell\"\n        tabler=\"IconNotification\"\n        hugeicons=\"NotificationIcon\"\n        phosphor=\"Notification\"\n        remixicon=\"RiNotification3Line\"\n        {...p}\n      />\n    ),\n  },\n  {\n    id: \"billing\",\n    label: \"Billing\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"CreditCard\"\n        tabler=\"IconCreditCard\"\n        hugeicons=\"CreditCardIcon\"\n        phosphor=\"CreditCard\"\n        remixicon=\"RiBankCardLine\"\n        {...p}\n      />\n    ),\n  },\n]\n\nexport default function SettingsBlock() {\n  const [active, setActive] = useState(\"profile\")\n\n  return (\n    <section className=\"flex min-h-svh w-full items-start justify-center bg-background px-6 py-12 text-foreground\">\n      <div className=\"w-full max-w-3xl\">\n        <h1 className=\"font-heading text-2xl font-bold tracking-tight\">\n          Settings\n        </h1>\n        <p className=\"mt-1 text-sm text-muted-foreground\">\n          Manage your account and workspace preferences.\n        </p>\n\n        <div className=\"mt-8 grid grid-cols-1 gap-8 md:grid-cols-[12rem_1fr]\">\n          <nav className=\"flex flex-col gap-1\">\n            {sections.map((section) => {\n              const Icon = section.icon\n              return (\n                <button\n                  key={section.id}\n                  type=\"button\"\n                  onClick={() => setActive(section.id)}\n                  aria-current={active === section.id}\n                  className={cn(\n                    \"flex items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm transition-colors\",\n                    active === section.id\n                      ? \"bg-muted font-medium text-foreground\"\n                      : \"text-muted-foreground hover:bg-muted/60 hover:text-foreground\"\n                  )}\n                >\n                  <Icon className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n                  {section.label}\n                </button>\n              )\n            })}\n          </nav>\n\n          <div className=\"min-w-0\">\n            {active === \"profile\" && (\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"flex items-center gap-4\">\n                  <Avatar className=\"size-14 border border-border\">\n                    <AvatarImage\n                      src=\"https://i.pravatar.cc/80?img=45\"\n                      alt=\"Elena Duarte\"\n                      className=\"grayscale\"\n                    />\n                    <AvatarFallback>ED</AvatarFallback>\n                  </Avatar>\n                  <Button variant=\"outline\" size=\"sm\">\n                    Change avatar\n                  </Button>\n                </div>\n                <Field>\n                  <FieldLabel htmlFor=\"name\">Full name</FieldLabel>\n                  <Input id=\"name\" defaultValue=\"Elena Duarte\" />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    defaultValue=\"elena@acme.com\"\n                  />\n                </Field>\n              </div>\n            )}\n\n            {active === \"notifications\" && (\n              <div className=\"flex flex-col gap-4\">\n                {[\"Product updates\", \"Weekly digest\", \"Security alerts\"].map(\n                  (label, index) => (\n                    <div key={label} className=\"flex flex-col gap-4\">\n                      {index > 0 && <Separator />}\n                      <div className=\"flex items-center justify-between\">\n                        <span className=\"text-sm font-medium\">{label}</span>\n                        <Switch\n                          defaultChecked={index !== 1}\n                          aria-label={label}\n                        />\n                      </div>\n                    </div>\n                  )\n                )}\n              </div>\n            )}\n\n            {active === \"account\" && (\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <h2 className=\"font-heading text-sm font-semibold tracking-tight\">\n                    Password\n                  </h2>\n                  <Field>\n                    <FieldLabel htmlFor=\"current\">Current password</FieldLabel>\n                    <Input\n                      id=\"current\"\n                      type=\"password\"\n                      placeholder=\"••••••••\"\n                    />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"new-password\">New password</FieldLabel>\n                    <Input\n                      id=\"new-password\"\n                      type=\"password\"\n                      placeholder=\"••••••••\"\n                    />\n                  </Field>\n                </div>\n                <Separator />\n                <div className=\"flex items-center justify-between gap-4\">\n                  <div className=\"flex flex-col gap-0.5\">\n                    <span className=\"text-sm font-medium\">\n                      Two-factor authentication\n                    </span>\n                    <span className=\"text-xs text-muted-foreground\">\n                      Add an extra layer of security to your account.\n                    </span>\n                  </div>\n                  <Switch aria-label=\"Two-factor authentication\" />\n                </div>\n              </div>\n            )}\n\n            {active === \"billing\" && (\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"flex items-center justify-between gap-4 rounded-lg border border-border p-4\">\n                  <div className=\"flex flex-col gap-0.5\">\n                    <span className=\"text-sm font-medium\">Pro plan</span>\n                    <span className=\"text-xs text-muted-foreground\">\n                      $29 / month, renews Aug 1, 2026\n                    </span>\n                  </div>\n                  <Button variant=\"outline\" size=\"sm\">\n                    Change plan\n                  </Button>\n                </div>\n                <Separator />\n                <div className=\"flex items-center justify-between gap-4\">\n                  <div className=\"flex flex-col gap-0.5\">\n                    <span className=\"text-sm font-medium\">Payment method</span>\n                    <span className=\"text-xs text-muted-foreground tabular-nums\">\n                      Visa •••• 4242, expires 08/27\n                    </span>\n                  </div>\n                  <Button variant=\"outline\" size=\"sm\">\n                    Update\n                  </Button>\n                </div>\n              </div>\n            )}\n\n            <div className=\"mt-8 flex justify-end gap-2 border-t border-border pt-5\">\n              <Button variant=\"outline\">Cancel</Button>\n              <Button>Save changes</Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/settings-4.tsx"
    }
  ],
  "meta": {
    "height": "485px",
    "tier": "free"
  },
  "categories": [
    "settings"
  ],
  "type": "registry:block"
}