Tabs Component

The Tabs component allows you to organize content into multiple panels that can be switched between. Perfect for settings pages, forms, and content organization.

Basic Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from 'nebula-ui';
 
export default function Example() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Account content goes here
      </TabsContent>
      <TabsContent value="password">
        Password content goes here
      </TabsContent>
    </Tabs>
  );
}

Default Value

Set the initially active tab:

<Tabs defaultValue="first">
  <TabsList>
    <TabsTrigger value="first">First</TabsTrigger>
    <TabsTrigger value="second">Second</TabsTrigger>
  </TabsList>
  <TabsContent value="first">First content</TabsContent>
  <TabsContent value="second">Second content</TabsContent>
</Tabs>

Controlled Component

Control the active tab programmatically:

const [activeTab, setActiveTab] = useState('account');
 
<Tabs value={activeTab} onValueChange={setActiveTab}>
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
</Tabs>

Disabled Tabs

Disable specific tabs:

<TabsList>
  <TabsTrigger value="account">Account</TabsTrigger>
  <TabsTrigger value="settings" disabled>Settings</TabsTrigger>
  <TabsTrigger value="billing">Billing</TabsTrigger>
</TabsList>

With Cards

Combine tabs with cards for a polished look:

import { Tabs, TabsList, TabsTrigger, TabsContent, Card, CardHeader, CardTitle, CardContent } from 'nebula-ui';
 
<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <Card>
      <CardHeader>
        <CardTitle>Account Settings</CardTitle>
      </CardHeader>
      <CardContent>
        Account content here
      </CardContent>
    </Card>
  </TabsContent>
  <TabsContent value="settings">
    <Card>
      <CardHeader>
        <CardTitle>Settings</CardTitle>
      </CardHeader>
      <CardContent>
        Settings content here
      </CardContent>
    </Card>
  </TabsContent>
</Tabs>

Props

Tabs Props

Prop	Type	Default	Description
`defaultValue`	`string`	-	Default active tab value
`value`	`string`	-	Controlled active tab value
`onValueChange`	`(value: string) => void`	-	Callback when tab changes
`children`	`ReactNode`	-	Tab content

TabsTrigger Props

Prop	Type	Default	Description
`value`	`string`	-	Unique value for this tab
`disabled`	`boolean`	`false`	Disable the tab
`children`	`ReactNode`	-	Tab trigger content

TabsContent Props

Prop	Type	Default	Description
`value`	`string`	-	Unique value for this tab content
`children`	`ReactNode`	-	Tab content

Accessibility

The Tabs component is fully accessible:

Keyboard navigation (Arrow keys to navigate, Enter/Space to activate)
Proper ARIA attributes (role="tablist", role="tab", role="tabpanel")
Focus management
Screen reader support

Examples

Settings Page

<Tabs defaultValue="general">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
    <TabsTrigger value="privacy">Privacy</TabsTrigger>
  </TabsList>
  <TabsContent value="general">
    <div className="space-y-4">
      <Input label="Name" />
      <Input label="Email" type="email" />
    </div>
  </TabsContent>
  <TabsContent value="notifications">
    <div className="space-y-4">
      <Switch label="Email notifications" />
      <Switch label="Push notifications" />
    </div>
  </TabsContent>
  <TabsContent value="privacy">
    <div className="space-y-4">
      <Checkbox label="Make profile public" />
      <Checkbox label="Allow search engines" />
    </div>
  </TabsContent>
</Tabs>

Best Practices

Use descriptive labels for tab triggers
Keep content focused - each tab should have a clear purpose
Limit the number of tabs - too many tabs can be overwhelming
Use consistent styling across all tabs
Provide keyboard navigation (handled automatically)