Tabs

npx @obi/ui add tabs

'use client';

import { useState } from 'react';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/src/components/Tabs/Tabs';

export default function Example() {
  const [tab, setTab] = useState('overview');

  return (
    <Tabs value={tab} onValueChange={setTab}>
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="details">Details</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <p className="text-sm text-text">Overview content goes here.</p>
      </TabsContent>
      <TabsContent value="details">
        <p className="text-sm text-text">Details content goes here.</p>
      </TabsContent>
      <TabsContent value="settings">
        <p className="text-sm text-text">Settings content goes here.</p>
      </TabsContent>
    </Tabs>
  );
}