{ "schemaVersion": 1, "target": "react", "name": "tabs", "version": "0.2.0", "category": "core", "title": "Tabs", "description": "Switch between related panels with an underline that follows the active tab on a hairline, sliding on click and jumping on keyboard selection.", "tags": [ "tabs", "navigation", "panels", "base-ui" ], "requires": { "projectTypes": [ "next", "vite-react" ], "styling": "tailwind-v4" }, "npmDependencies": { "@base-ui/react": "^1.9.0" }, "registryDependencies": [], "docsPath": "/components/tabs", "props": [ { "name": "Tabs.defaultValue", "type": "any", "default": "0", "description": "Value of the tab that is active initially, when uncontrolled." }, { "name": "Tabs.value", "type": "any", "description": "Value of the active tab, when controlled. Pair with onValueChange." }, { "name": "Tabs.onValueChange", "type": "(value: any, details) => void", "description": "Called when the active tab changes." }, { "name": "Tabs.orientation", "type": "\"horizontal\" | \"vertical\"", "default": "\"horizontal\"", "description": "Lays the tabs out in a row or a column and sets which arrow keys move between them." }, { "name": "TabsList.activateOnFocus", "type": "boolean", "default": "false", "description": "Activates a tab as soon as arrow keys focus it, instead of on Enter or Space." }, { "name": "TabsList.loopFocus", "type": "boolean", "default": "true", "description": "Wraps arrow-key focus from the last tab to the first and back." }, { "name": "TabsTab.value", "type": "any", "description": "Identifies the tab. Must match a TabsPanel value." }, { "name": "TabsTab.disabled", "type": "boolean", "default": "false", "description": "Skips the tab during keyboard navigation and ignores clicks." }, { "name": "TabsPanel.value", "type": "any", "description": "Shown while the tab with the same value is active." }, { "name": "TabsPanel.keepMounted", "type": "boolean", "default": "false", "description": "Keeps the panel in the DOM, hidden, while another tab is active." } ], "accessibility": [ "Base UI renders the tablist, tab, and tabpanel roles and links each tab to its panel with aria-controls and aria-labelledby.", "Arrow keys move focus between tabs (Left/Right, or Up/Down when vertical); Home and End jump to the first and last tab.", "Only the active tab is in the tab order, so Tab moves from the tab list straight into the panel.", "The active tab is marked with aria-selected and an underline bar, not only a color change.", "Give TabsList an aria-label that names the group.", "The underline slides with a 350ms spring only for pointer selection; keyboard selection moves it without animating, and with reduced motion it never slides. Panels fade in over 150ms, removed with reduced motion." ], "states": [ "default", "hover", "active", "focus-visible", "disabled" ], "files": [ { "path": "ui/tabs.tsx", "content": "\"use client\";\n\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { type KeyboardEvent, type PointerEvent, useState } from \"react\";\n\nfunction cx(...classes: Array) {\n return classes.filter(Boolean).join(\" \");\n}\n\n// A critically damped spring (bounce 0) settling in about 350ms, sampled for CSS linear().\nconst spring =\n \"ease-[linear(0,0.044,0.144,0.263,0.384,0.495,0.593,0.675,0.744,0.8,0.844,0.88,0.908,0.929,0.946,0.959,0.969,0.977,0.982,0.987,1)]\";\n\nexport interface TabsProps extends Omit {\n className?: string;\n}\n\n/**\n * Groups a tab list with its panels. Set `defaultValue` (or `value` + `onValueChange`) to a tab's `value`.\n * Tabs use manual activation: arrow keys move focus, Enter or Space selects.\n */\nexport function Tabs({ className, ...props }: TabsProps) {\n return (\n \n );\n}\n\nexport interface TabsListProps extends Omit {\n className?: string;\n}\n\n/**\n * The row of tabs on a hairline. An underline follows the active tab: it slides with a spring\n * when a tab is clicked, and jumps without animating when the selection changes from the keyboard.\n */\nexport function TabsList({ className, children, onPointerDown, onKeyDown, ...props }: TabsListProps) {\n const [input, setInput] = useState<\"pointer\" | \"keyboard\">(\"pointer\");\n\n return (\n ) => {\n setInput(\"pointer\");\n onPointerDown?.(event as never);\n }}\n onKeyDown={(event: KeyboardEvent) => {\n setInput(\"keyboard\");\n onKeyDown?.(event as never);\n }}\n className={cx(\n \"group/tabs relative z-0 flex gap-1 border-zinc-950/10 dark:border-white/10\",\n \"data-[orientation=horizontal]:border-b data-[orientation=horizontal]:pb-1.5\",\n \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-l data-[orientation=vertical]:pl-1.5\",\n className,\n )}\n {...props}\n >\n {children}\n \n \n );\n}\n\nexport interface TabsTabProps extends Omit {\n className?: string;\n}\n\n/** A single tab. Its `value` must match a `TabsPanel`'s `value`. */\nexport function TabsTab({ className, ...props }: TabsTabProps) {\n return (\n \n );\n}\n\nexport interface TabsPanelProps extends Omit {\n className?: string;\n}\n\n/** Content shown while the tab with the same `value` is active. Fades in quickly when shown. */\nexport function TabsPanel({ className, ...props }: TabsPanelProps) {\n return (\n \n );\n}\n" } ], "example": { "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/components/seamless/ui/tabs\";\n\nexport default function TabsExample() {\n return (\n \n \n Overview\n Activity\n Settings\n \n Three deploys this week, all healthy.\n Ada merged “Add rate limits” two hours ago.\n Builds run on every push to main.\n \n );\n}\n" } }