Horizontal Tabs
Horizontal tabs allow users to navigate between sections within the same view. Available in five visual styles and three sizes, with full RTL support.
Loading preview…
1
<HorizontalTabs2
type="underline"3
value={tab}4
onValueChange={setTab}5
items={[Installation
npx sdaia-ui@latest add horizontal-tabs
Usage
import { HorizontalTabs } from "@/components/ui/horizontal-tabs"<HorizontalTabs type="primary" size="medium" />Examples
Primary
Default tab style with a filled active indicator.
Loading preview…
1
<HorizontalTabs type="primary" size="lg" defaultValue="tab1" items={items} />Underline
Tabs with an underline beneath the active tab.
Loading preview…
1
<HorizontalTabs type="underline" size="lg" defaultValue="tab1" items={items} />Outline
Tabs enclosed in a bordered outline container.
Loading preview…
1
<HorizontalTabs type="outline" size="lg" defaultValue="tab1" items={items} />Shadow
Tabs with a shadow applied to the active tab.
Loading preview…
1
<HorizontalTabs type="shadow" size="lg" defaultValue="tab1" items={items} />Neutral
Tabs in a neutral grey style.
Loading preview…
1
<HorizontalTabs type="neutral" size="lg" defaultValue="tab1" items={items} />Sizes
Horizontal tabs available in Small, Medium, and Large sizes.
Loading preview…
1
<HorizontalTabs type="primary" size="lg" items={items} />2
<HorizontalTabs type="primary" size="md" items={items} />3
<HorizontalTabs type="primary" size="sm" items={items} />API Reference
HorizontalTabsProps
Props for the HorizontalTabs component.
Prop | Type | Default | Required |
|---|---|---|---|
items | HorizontalTabItem[] | - | required |
type | 'primary' | 'neutral' | 'underline' | 'shadow' | 'outline' | 'primary' | optional |
size | 'sm' | 'md' | 'lg' | 'md' | optional |
value | string | - | optional |
defaultValue | string | - | optional |
onValueChange | (value: string) => void | - | optional |
disabled | boolean | false | optional |