Vertical Tabs
Vertical Tabs organises content into vertically stacked tab panels, available in Primary, Neutral, Line, and Outline styles across three sizes.
Loading preview…
1
<VerticalTabs2
type="line-vertical"3
value={tab}4
onValueChange={setTab}5
items={[Installation
npx sdaia-ui@latest add vertical-tabs
Usage
import { VerticalTabs } from "@/components/ui/vertical-tabs"<VerticalTabs type="primary" size="large" />Examples
Primary
Vertical tabs with a filled active indicator.
Loading preview…
1
<VerticalTabs type="primary" defaultValue="tab1" items={items} />Outline
Vertical tabs enclosed in a bordered outline container.
Loading preview…
1
<VerticalTabs type="outline" defaultValue="tab1" items={items} />Neutral
Vertical tabs in a neutral grey style.
Loading preview…
1
<VerticalTabs type="neutral" defaultValue="tab1" items={items} />API Reference
TabProps
Props for the Tab component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'primary' | 'neutral' | 'underline' | 'line-vertical' | 'outline' | 'primary' | optional |
size | 'sm' | 'md' | 'lg' | 'md' | optional |
selected | boolean | false | optional |
disabled | boolean | false | optional |
label | ReactNode | - | optional |
leadingIcon | ReactNode | - | optional |
trailingIcon | ReactNode | - | optional |
count | ReactNode | - | optional |
children | ReactNode | - | optional |
buttonType | 'button' | 'submit' | 'reset' | 'button' | optional |