{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-page",
  "title": "Tabs page",
  "description": "A tabbed settings page with account, notifications, and security panels.",
  "registryDependencies": [
    "tabs",
    "card",
    "input",
    "label",
    "switch"
  ],
  "files": [
    {
      "path": "registry/blocks/tabs-page.tsx",
      "content": "import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n} from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Switch } from '@/components/ui/switch'\n\n/** A tabbed settings page with account, notifications, and security panels. */\nexport function TabsPage() {\n  return (\n    <div className=\"w-[560px]\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n          <TabsTrigger value=\"security\">Security</TabsTrigger>\n        </TabsList>\n        <TabsContent value=\"account\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Account</CardTitle>\n              <CardDescription>Update your account details.</CardDescription>\n            </CardHeader>\n            <CardContent className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-1.5\">\n                <Label htmlFor=\"t-name\">Display name</Label>\n                <Input id=\"t-name\" defaultValue=\"Ada Lovelace\" />\n              </div>\n              <div className=\"flex flex-col gap-1.5\">\n                <Label htmlFor=\"t-email\">Email</Label>\n                <Input id=\"t-email\" type=\"email\" defaultValue=\"ada@example.com\" />\n              </div>\n            </CardContent>\n          </Card>\n        </TabsContent>\n        <TabsContent value=\"notifications\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Notifications</CardTitle>\n              <CardDescription>Choose what you hear about.</CardDescription>\n            </CardHeader>\n            <CardContent className=\"flex flex-col gap-4\">\n              <div className=\"flex items-center justify-between\">\n                <Label htmlFor=\"t-email-n\">Email digests</Label>\n                <Switch id=\"t-email-n\" defaultChecked />\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <Label htmlFor=\"t-push\">Push notifications</Label>\n                <Switch id=\"t-push\" />\n              </div>\n            </CardContent>\n          </Card>\n        </TabsContent>\n        <TabsContent value=\"security\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Security</CardTitle>\n              <CardDescription>Keep your account safe.</CardDescription>\n            </CardHeader>\n            <CardContent className=\"flex flex-col gap-1.5\">\n              <Label htmlFor=\"t-pass\">New password</Label>\n              <Input id=\"t-pass\" type=\"password\" placeholder=\"••••••••\" />\n            </CardContent>\n          </Card>\n        </TabsContent>\n      </Tabs>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/tabs-page.tsx"
    }
  ],
  "meta": {
    "intent": [
      "navigation",
      "settings"
    ],
    "use_when": "You need a settings screen split into account, notifications, and security tabs.",
    "not_for": "everything fits on one page without needing to split into separate tabbed sections → settings; the sections are sequential setup steps completed once, not independent settings a user revisits and edits freely → wizard"
  },
  "docs": "A tabbed settings page with account, notifications, and security panels. Do: Keep each TabsTrigger's `value` identical to its TabsContent's `value` when you rename a section (here, `account`/`notifications`), so the tab a user lands on always has a panel to show. Don't: Rename a TabsTrigger's `value` (e.g. Notifications → Alerts) without updating its TabsContent to match — the renamed tab still highlights as active since its own value is valid, but the panel underneath renders empty because no content shares that value anymore. Use settings when everything fits on one page without needing to split into separate tabbed sections. Use wizard when the sections are sequential setup steps completed once, not independent settings a user revisits and edits freely.",
  "categories": [
    "navigation",
    "settings"
  ],
  "type": "registry:block"
}