1import { Tabs } from '@cerberus/react'Usage
The Tabs component is used to create a tabbed interface.
Overview content
Features content
Pricing content
Palette
The palette prop can be used to change the color of the Tabs.
Overview content
Features content
Pricing content
Primitives
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. |
A peaceful and quiet region of the underworld.
A paradise for the souls of the heroic and the virtuous.
A deep abyss used as a dungeon of torment and suffering.
API
Props
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
Tabs component parts
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. |
Parts
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