{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "type": "registry:ui",
  "title": "Tabs",
  "description": "Switch between views of related content in the same place, like Account and Billing settings.",
  "dependencies": [
    "radix-ui@^1.6.7"
  ],
  "registryDependencies": [
    "https://blank.vageshwar.dev/r/theme.json",
    "https://blank.vageshwar.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "ui/tabs.tsx",
      "type": "registry:ui",
      "content": "// BlankUI: tabs. Managed by BlankUI. Read tabs.md before editing.\nimport type { ComponentProps } from \"react\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Switch between views of related content in the same place. Every TabsTrigger needs a TabsContent with the same `value`.\n *\n * @example\n * <Tabs defaultValue=\"account\">\n *   <TabsList>\n *     <TabsTrigger value=\"account\">Account</TabsTrigger>\n *     <TabsTrigger value=\"billing\">Billing</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"account\">...</TabsContent>\n *   <TabsContent value=\"billing\">...</TabsContent>\n * </Tabs>\n */\nexport function Tabs({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\"flex flex-col gap-4\", className)}\n      {...props}\n    />\n  )\n}\n\n/** The row of tab buttons. */\nexport function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn(\n        \"inline-flex w-fit items-center gap-1 rounded-lg border bg-muted p-1 text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** One tab button. `value` must match a TabsContent. */\nexport function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"inline-flex cursor-pointer items-center justify-center gap-2 rounded-md border border-transparent px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-edge data-[state=active]:bg-surface data-[state=active]:text-foreground data-[state=active]:shadow-sm [&_svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The panel for one tab. */\nexport function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n"
    },
    {
      "path": "ui/tabs.md",
      "type": "registry:ui",
      "content": "---\nname: tabs\ntitle: Tabs\ndescription: Switch between views of related content in the same place, like Account and Billing settings.\ncategory: navigation\nwhenToUse:\n  - Two to six views of related content where the user looks at one at a time.\nwhenNotToUse:\n  - when: Moving between pages with their own URL.\n    use: links in your navigation\n  - when: Steps the user must go through in order.\n    use: a step-by-step form with Buttons\n  - when: Picking a value for a form.\n    use: select\nrelated: [select, card]\nrequiredParts: [Tabs, TabsList, TabsTrigger, TabsContent]\nantiPatterns:\n  - avoid: \"Buttons that set state and show different divs\"\n    instead: \"<Tabs> handles keyboard navigation and ARIA roles\"\n  - avoid: \"A TabsTrigger without a TabsContent of the same value\"\n    instead: \"One TabsContent per TabsTrigger\"\n---\n\n# Tabs\n\nBuilt on Radix. Arrow keys move between tabs. Use `defaultValue`, or `value` with `onValueChange` to control it.\n\n## Import\n\n```tsx\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\n```\n\n## Example\n\n```tsx\n<Tabs defaultValue=\"account\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\">\n    <Card>...</Card>\n  </TabsContent>\n  <TabsContent value=\"password\">\n    <Card>...</Card>\n  </TabsContent>\n</Tabs>\n```\n"
    }
  ],
  "docs": "Read components/ui/tabs.md before using Tabs. Docs: https://blank.vageshwar.dev/docs/tabs",
  "meta": {
    "category": "navigation",
    "requiredParts": [
      "Tabs",
      "TabsList",
      "TabsTrigger",
      "TabsContent"
    ],
    "related": [
      "select",
      "card"
    ]
  }
}