Components
Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Loading
Installation
pnpm dlx shadcn@latest add @toui/tabs
Examples
Icon
Loading
Badge
Loading
Button
Loading
Pill
Loading
Line
Loading
Vertical
Loading
Size - Large
Loading
Size - Medium
Loading
Size - Small
Loading
Size - Xsmall
Loading
Disabled
Loading
Pattern
Tokens
25 CSS variables in 7 categories.
px
| CSS Variable | Value | Description |
|---|---|---|
--tabs-px-xs | 0.5rem | 8px |
--tabs-px-sm | 0.625rem | 10px |
--tabs-px-md | 0.75rem | 12px |
--tabs-px-lg | 1rem | 16px |
py
| CSS Variable | Value | Description |
|---|---|---|
--tabs-py-xs | 0.375rem | 6px |
--tabs-py-sm | 0.5rem | 8px |
--tabs-py-md | 0.625rem | 10px |
--tabs-py-lg | 0.625rem | 10px |
gap
| CSS Variable | Value | Description |
|---|---|---|
--tabs-gap-xs | var(--component-gap-xs) | — |
--tabs-gap-sm | var(--component-gap-sm) | — |
--tabs-gap-md | var(--component-gap-sm) | — |
--tabs-gap-lg | var(--component-gap-md) | — |
text
| CSS Variable | Value | Description |
|---|---|---|
--tabs-text-xs | var(--component-text-xs) | — |
--tabs-text-sm | var(--component-text-xs) | — |
--tabs-text-md | var(--component-text-sm) | — |
--tabs-text-lg | var(--component-text-sm) | — |
icon-size
| CSS Variable | Value | Description |
|---|---|---|
--tabs-icon-size-xs | 0.875rem | 14px |
--tabs-icon-size-sm | 0.875rem | 14px |
--tabs-icon-size-md | 1rem | 16px |
--tabs-icon-size-lg | 1.25rem | 20px |
list-p
| CSS Variable | Value | Description |
|---|---|---|
--tabs-list-p-xs | 0.25rem | 4px — container padding |
--tabs-list-p-sm | 0.25rem | — |
--tabs-list-p-md | 0.25rem | — |
--tabs-list-p-lg | 0.375rem | — |
radius
| CSS Variable | Value | Description |
|---|---|---|
--tabs-radius | var(--component-radius-md) | — |
API Reference
This component is built using Radix UI Tabs primitives. For detailed information, please visit the full API reference.
Tabs
This component is based on the Tabs.Root primitive. For full details, visit the official documentation.
TabsList
This component is based on the Tabs.List primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
variant | ||
size | ||
className |
TabsTrigger
This component is based on the Tabs.Trigger primitive and inherits the following props from context:
| Prop | Type | Default |
|---|---|---|
variant | ||
size | ||
className |
TabsContent
This component is based on the Tabs.Content primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
variant | ||
className |
Credits
- Built with Radix UI Tabs.