Tabs

import { Tabs, Tab } from "@raydenui/ui";

<Tabs defaultValue="overview">
  <Tab value="overview">Overview</Tab>
  <Tab value="settings">Settings</Tab>
  <Tab value="billing">Billing</Tab>
</Tabs>

// Line variant (default)
<Tabs variant="line" defaultValue="tab1">
  <Tab value="tab1">Tab 1</Tab>
  <Tab value="tab2">Tab 2</Tab>
</Tabs>
 
// Pill variant
<Tabs variant="pill" defaultValue="tab1">
  <Tab value="tab1">Tab 1</Tab>
  <Tab value="tab2">Tab 2</Tab>
</Tabs>
 
// Segmented variant
<Tabs variant="segmented" defaultValue="tab1">
  <Tab value="tab1">Tab 1</Tab>
  <Tab value="tab2">Tab 2</Tab>
</Tabs>

<Tabs size="sm" defaultValue="tab1">...</Tabs>
<Tabs size="md" defaultValue="tab1">...</Tabs>
<Tabs size="lg" defaultValue="tab1">...</Tabs>

<Tabs defaultValue="home">
  <Tab value="home" icon="home">Home</Tab>
  <Tab value="settings" icon="settings">Settings</Tab>
  <Tab value="users" icon="users">Users</Tab>
</Tabs>

<Tabs defaultValue="inbox">
  <Tab value="inbox" badge={12}>Inbox</Tab>
  <Tab value="drafts" badge={3}>Drafts</Tab>
  <Tab value="sent">Sent</Tab>
</Tabs>

<Tabs defaultValue="active">
  <Tab value="active">Active</Tab>
  <Tab value="disabled" disabled>Disabled</Tab>
  <Tab value="another">Another</Tab>
</Tabs>

const [activeTab, setActiveTab] = useState("first");
 
<Tabs value={activeTab} onValueChange={setActiveTab}>
  <Tab value="first">First</Tab>
  <Tab value="second">Second</Tab>
  <Tab value="third">Third</Tab>
</Tabs>