{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Keyboard-navigable content tabs with quiet pill or underline styling and a clear selected state in both themes.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/direction.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/tabs.tsx",
      "content": "// Ballmac UI: Tabs. https://ui.ballmac.com/components/tabs\n\"use client\";\n\nimport * as React from \"react\";\nimport { Tabs as Primitive } from \"radix-ui\";\nimport { useDirection } from \"@/lib/ballmac/direction\";\nimport { cn } from \"@/lib/utils\";\n\ntype TabsProps = React.ComponentProps<typeof Primitive.Root>;\nfunction Tabs({ className, ...props }: TabsProps) {\n  const dir = useDirection(props.dir);\n  return (\n    <Primitive.Root\n      dir={dir}\n      data-slot=\"tabs\"\n      className={cn(\"flex min-w-0 flex-col gap-4\", className)}\n      {...props}\n    />\n  );\n}\ntype TabsListProps = React.ComponentProps<typeof Primitive.List> & {\n  /** Visual treatment of the selected tab. */\n  variant?: \"pills\" | \"underline\";\n};\nfunction TabsList({ className, variant = \"pills\", ...props }: TabsListProps) {\n  return (\n    <Primitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(\n        \"inline-flex max-w-full items-center gap-1 self-start overflow-x-auto rounded-lg p-1 text-muted-foreground\",\n        variant === \"pills\"\n          ? \"bg-muted\"\n          : \"rounded-none border-b bg-transparent pb-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\ntype TabsTriggerProps = React.ComponentProps<typeof Primitive.Trigger>;\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n  return (\n    <Primitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"inline-flex min-h-9 shrink-0 items-center justify-center gap-2 rounded-md px-3 text-sm font-medium whitespace-nowrap outline-none transition-[color,background-color,box-shadow] duration-150 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 data-[state=active]:text-foreground [[data-variant=pills]_&]:data-[state=active]:bg-background [[data-variant=pills]_&]:data-[state=active]:shadow-xs [[data-variant=underline]_&]:rounded-none [[data-variant=underline]_&]:border-b-2 [[data-variant=underline]_&]:border-transparent [[data-variant=underline]_&]:data-[state=active]:border-primary motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\ntype TabsContentProps = React.ComponentProps<typeof Primitive.Content>;\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <Primitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"min-w-0 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentProps,\n};\n",
      "type": "registry:ui",
      "target": "@components/ballmac/tabs.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "tabs",
      "views",
      "navigation",
      "radix"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "Switches between a small number of peer views while retaining Radix tablist semantics and roving focus.",
      "whenToUse": [
        "Related panels within one page",
        "Compact dashboards and detail views"
      ],
      "whenNotToUse": [
        "Steps in a workflow; use progress-steps",
        "Site navigation to separate pages"
      ],
      "composesWith": [
        "card",
        "badge"
      ],
      "a11y": [
        {
          "keys": "Tab",
          "action": "Focuses the active tab"
        },
        {
          "keys": "Arrow keys / Home / End",
          "action": "Moves among tabs"
        },
        {
          "keys": "Tab again",
          "action": "Moves into the active panel"
        }
      ],
      "customization": [
        "variant: pills | underline",
        "controlled or uncontrolled value",
        "orientation"
      ]
    },
    "examples": [
      "tabs-demo",
      "tabs-states"
    ],
    "url": "https://ui.ballmac.com/components/tabs"
  },
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}