import { Tabs } from '@cerberus/react'The Tabs component is used to create a tabbed interface.
The palette prop can be used to change the color of the Tabs.
You can utilize the primitive components or the css prop to customize the tabs.
| Component | Description |
|---|---|
| TabsRoot | The context provider for the tabs parts |
| TabsList | The list container of the tabs |
| TabsTrigger | The tab components of the tabs |
| TabsIndicator | The indicator of the active tabs state |
| TabsContent | The panel container for the tabs. |
The Tabs component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| palette | action | The color palette of the tabs |
The Tabs.Root component also accepts all the props of the TabsRoot primitive props
The Tabs API is an Object containing the full family of abstracted components.
| Name | Description |
|---|---|
| Root | An abstraction of the TabsRoot. |
| List | An abstraction of the TabsList and TabsIndicator. |
| Tab | An abstraction of the TabsTrigger. |
| Panel | An abstraction of the TabsContent. |
The TabsParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The TabsRoot component which is the Provider for the family. |
| List | The TabsList component which is the container for the tabs. |
| Trigger | The TabsTrigger component which is the tab component. |
| Content | The TabsContent component which is the panel container. |
| Indicator | The TabsIndicator component which displays based on the active state. |
On this page