Tabs

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@brutal-ui/react';

const [activeTab, setActiveTab] = useState('tab1');

<Tabs value={activeTab} onValueChange={setActiveTab}>
  <TabsList>
    <TabsTrigger value='tab1'>Profile</TabsTrigger>
    <TabsTrigger value='tab2'>Settings</TabsTrigger>
    <TabsTrigger value='tab3'>About</TabsTrigger>
  </TabsList>
  
  <TabsContent value='tab1'>
    <div className='p-6 bg-gray-50 border-4 border-black'>
      <h3>Profile Information</h3>
      <p>Your profile content...</p>
    </div>
  </TabsContent>
  
  <TabsContent value='tab2'>
    <div className='p-6 bg-gray-50 border-4 border-black'>
      <h3>Settings</h3>
      <p>Your settings content...</p>
    </div>
  </TabsContent>
</Tabs>