Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time. Built on top of Radix UI Tabs primitive.

Installation

npm install @darksnow-ui/tabs

Peer Dependencies

npm install react react-dom

Usage

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@darksnow-ui/tabs"

export function TabsExample() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="space-y-2">
        <div className="space-y-1">
          <Label htmlFor="name">Name</Label>
          <Input id="name" defaultValue="Pedro Duarte" />
        </div>
        <div className="space-y-1">
          <Label htmlFor="username">Username</Label>
          <Input id="username" defaultValue="@peduarte" />
        </div>
      </TabsContent>
      <TabsContent value="password" className="space-y-2">
        <div className="space-y-1">
          <Label htmlFor="current">Current password</Label>
          <Input id="current" type="password" />
        </div>
        <div className="space-y-1">
          <Label htmlFor="new">New password</Label>
          <Input id="new" type="password" />
        </div>
      </TabsContent>
    </Tabs>
  )
}

Components

Tabs

The root container component.

| Prop | Type | Default | Description | |--------------|-------------------|---------|--------------------------------| | value | string | - | Controlled active value | | defaultValue | string | - | Default active value | | onValueChange| function | - | Called when value changes | | orientation | "horizontal" | "vertical" | "horizontal" | Tab orientation | | className | string | - | Additional CSS classes |

TabsList

Container for tab triggers.

TabsTrigger

Button that activates a tab panel.

| Prop | Type | Default | Description | |-----------|-------------------|---------|------------------------| | value | string | - | The tab's value | | disabled | boolean | false | Disables the tab | | className | string | - | Additional CSS classes|

TabsContent

Content panel for each tab.

| Prop | Type | Default | Description | |-----------|-------------------|---------|--------------------------------| | value | string | - | Associated tab value | | className | string | - | Additional CSS classes |

Examples

Basic Tabs

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content for Tab 1</TabsContent>
  <TabsContent value="tab2">Content for Tab 2</TabsContent>
  <TabsContent value="tab3">Content for Tab 3</TabsContent>
</Tabs>

Controlled Tabs

function ControlledTabs() {
  const [activeTab, setActiveTab] = useState("overview")

  return (
    <Tabs value={activeTab} onValueChange={setActiveTab}>
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Overview content</TabsContent>
      <TabsContent value="analytics">Analytics content</TabsContent>
      <TabsContent value="reports">Reports content</TabsContent>
    </Tabs>
  )
}

Vertical Tabs

<Tabs defaultValue="account" orientation="vertical" className="flex">
  <TabsList className="flex-col h-fit">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <div className="flex-1 ml-4">
    <TabsContent value="account">Account settings</TabsContent>
    <TabsContent value="password">Password settings</TabsContent>
    <TabsContent value="settings">General settings</TabsContent>
  </div>
</Tabs>

Accessibility

• Full keyboard navigation support
• Screen reader accessible with proper ARIA attributes
• Arrow key navigation between tabs
• Home/End keys for first/last tab
• Focus management

Styling

Uses DarkSnow UI design tokens for consistent theming.

Related Components

• Accordion - Collapsible content sections
• Navigation Menu - Site navigation