Tabs
Accessible tabs component with multiple variants, orientations, and keyboard navigation for organizing content
Installation
Install the Tabs component using the nocta-ui CLI:
npx nocta-ui add tabsImport the component:
import {
Tabs,
TabsList,
TabsTrigger,
TabsContent
} from '@/components/ui/tabs';Examples
The Tabs component follows a composable architecture where you build tabbed interfaces by combining smaller components together.
Overview
View your account overview and recent activity.
This is the overview tab content. You can add any components here.
Variants
The Tabs component supports three visual variants: default, pills, and underline.
Default
Account settings and profile information.
Pills
Welcome to the home page content.
Underline
Your dashboard overview and quick stats.
Sizes
Three size options are available: sm, md, and lg. The default size is md.
Small
Small tab content.
Medium
Medium tab content.
Large
Large tab content.
Vertical Orientation
Tabs can be displayed vertically using the orientation="vertical" prop.
General Settings
Manage your general account settings and preferences.
This is your public display name.
Your email address for notifications.
Disabled States
Individual tabs can be disabled using the disabled prop on TabsTrigger.
This tab is available and can be accessed.
Api Reference
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Tabs content |
value | string | — | Controlled active tab value |
defaultValue | string | — | Default active tab value |
onValueChange | (value: string) => void | — | Callback when tab changes |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Tabs orientation |
variant | 'default' | 'pills' | 'underline' | 'default' | Visual variant |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
className | string | '' | Additional CSS classes |
disabled | boolean | false | Disable all tabs |
TabsList
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Tab triggers |
className | string | '' | Additional CSS classes |
TabsTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Trigger content |
value | string | — | Unique tab identifier |
className | string | '' | Additional CSS classes |
disabled | boolean | false | Disable this tab |
TabsContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content to display |
value | string | — | Tab identifier this content belongs to |
className | string | '' | Additional CSS classes |
The Tabs components also accept all standard HTML attributes for their respective elements.