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 demo: horizontal-tabs-real-world
npx sdaia-ui@latest add horizontal-tabs
import { HorizontalTabs } from "@/components/ui/horizontal-tabs"<HorizontalTabs type="primary" size="medium" />Default tab style with a filled active indicator.
Loading demo: horizontal-tabs-primary
Tabs with an underline beneath the active tab.
Loading demo: horizontal-tabs-underline
Tabs enclosed in a bordered outline container.
Loading demo: horizontal-tabs-outline
Tabs with a shadow applied to the active tab.
Loading demo: horizontal-tabs-shadow
Tabs in a neutral grey style.
Loading demo: horizontal-tabs-neutral
Horizontal tabs available in Small, Medium, and Large sizes.
Loading demo: horizontal-tabs-sizes
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 |