Installation
Run the following command
npx vibes@latest add tabs
Usage
import { Tabs } from '@/vibes/soul/primitives/tabs';function Usage() { return ( <Tabs defaultValue="tracking" tabs={[ { value: 'tracking', label: 'Tracking', content: <p>Tracking</p> }, { value: 'details', label: 'Details', content: <p>Details</p> }, ]} /> );}
API Reference
TabsProps
| Prop | Type | Default |
|---|
className
| string
| |
defaultValue*
| string
| |
tabs*
| | |
Tab
| Prop | Type | Default |
|---|
value*
| string
| |
label*
| string
| |
content*
| ReactNode
| |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --tabs-focus: var(--primary); --tabs-font-family: var(--font-family-body); --tabs-text: var(--contrast-500); --tabs-text-hover: var(--foreground); --tabs-text-active: var(--foreground); --tabs-underline-active: var(--primary); --tabs-underline-hover: var(--contrast-200); --tabs-border: var(--contrast-100);}
