Tabs
A pill of tabs over the panel they switch, laid out by whatever holds them rather than by the root.
01Preview
01Primitives and a runtime for production chat, with adapters for any backend. Start here for what the library is and what it assumes.
02Installation
npx shadcn@latest add https://aiellie.app/r/tabs.json03API reference
05From the Base UI documentation
Groups the tabs and the corresponding panels. Renders a <div> element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | Tabs.Tab.Value | 0 | The default value. Use when the component is not controlled. When the value is null, no Tab will be active. |
| value | Tabs.Tab.Value | - | The value of the currently active Tab. Use when the component is controlled. When the value is null, no Tab will be active. |
| onValueChange | ((value: Tabs.Tab.Value, eventDetails: Tabs.Root.ChangeEventDetails) => void) | - | Callback invoked when new value is being set. The event reason is 'none' for user-initiated changes, such as a click or keyboard navigation; 'initial' for the first automatic selection or fallback in uncontrolled roots when defaultValue is omitted or undefined, including when the implicit initial value is disabled or missing; 'disabled' for automatic fallback when the selected tab becomes disabled in uncontrolled roots; or 'missing' for automatic fallback when the selected tab is removed, or when an explicit defaultValue never matches a mounted tab in uncontrolled roots. For automatic changes, the selected value can be null when no enabled Tab is available as a fallback. Automatic changes cannot be canceled; calling eventDetails.cancel() for 'initial', 'disabled', or 'missing' has no effect. |
| orientation | Tabs.Root.Orientation | 'horizontal' | The component orientation (layout flow direction). |
| className | string | ((state: Tabs.Root.State) => string | undefined) | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
| style | React.CSSProperties | ((state: Tabs.Root.State) => React.CSSProperties | undefined) | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement | ((props: HTMLProps, state: Tabs.Root.State) => ReactElement) | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Data Attributes
| Attribute | Type | Description |
|---|---|---|
| data-orientation | 'horizontal' | 'vertical' | Indicates the orientation of the tabs. |
| data-activation-direction | 'left' | 'right' | 'up' | 'down' | 'none' | Indicates the direction of the activation (based on the previous active tab). |