Vertical Tabs organises content into vertically stacked tab panels, available in Primary, Neutral, Line, and Outline styles across three sizes.
Loading demo: vertical-tabs-real-world
npx sdaia-ui@latest add vertical-tabs
import { VerticalTabs } from "@/components/ui/vertical-tabs"<VerticalTabs type="primary" size="large" />Vertical tabs with a filled active indicator.
Loading demo: vertical-tabs-primary
Vertical tabs enclosed in a bordered outline container.
Loading demo: vertical-tabs-outline
Vertical tabs in a neutral grey style.
Loading demo: vertical-tabs-neutral
Props for the Tab component.
Prop | Type | Default | Required |
|---|---|---|---|
items | VerticalTabItem[] | — | required |
type | 'primary' | 'neutral' | 'line-vertical' | 'outline' | — | optional |
value | string | — | optional |
defaultValue | string | — | optional |
onValueChange | (value: string) => void | — | optional |
disabled | boolean | false | optional |