Tabs

lunar add tabs

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

const [activeTab, setActiveTab] = useState('tab1');
 
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList>
  <TabsTrigger value="tab1">Tab 1</TabsTrigger>
  <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  <TabsTrigger value="tab3">Tab 3</TabsTrigger>
</TabsList>
 
<TabsContent value="tab1">
  <Text>Content for Tab 1</Text>
</TabsContent>
 
<TabsContent value="tab2">
  <Text>Content for Tab 2</Text>
</TabsContent>
 
<TabsContent value="tab3">
  <Text>Content for Tab 3</Text>
</TabsContent>
</Tabs>

// Underline (default)
<Tabs variant="underline" value={tab} onValueChange={setTab}>
{/* ... */}
</Tabs>
 
// Pill
<Tabs variant="pill" value={tab} onValueChange={setTab}>
{/* ... */}
</Tabs>

<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList>
  <TabsTrigger value="tab1">Active</TabsTrigger>
  <TabsTrigger value="tab2" disabled>Disabled</TabsTrigger>
  <TabsTrigger value="tab3">Active</TabsTrigger>
</TabsList>
{/* Content */}
</Tabs>