Tabs

Tabs organize content into multiple sections and allow users to navigate between them. Built on Radix UI Tabs with full accessibility support.

Tabs Examples

Installation

# The component is already installed at:
# src/components/ui/shadcn/tabs.tsx

Usage

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/components/ui/shadcn/tabs'

export function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Account settings content
      </TabsContent>
      <TabsContent value="password">
        Password settings content
      </TabsContent>
    </Tabs>
  )
}

Components