Tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@zynactra/ui/tabs"

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>

Examples

Line

The active marker slides to the tab you pick. Until the page has loaded (or without JavaScript) each tab's own underline marks the active one, so there's always a marker.

Synced to the URL

Settings and detail pages, where a reload or a shared link should open the same tab. The tab is read from ?tab= on mount and written back with history.replaceState. In Next.js, do the same with useSearchParams and router.replace.

Guidelines

• Use variant="line" for page sections: the active tab gets the brand bar.
• Use the default (segmented) variant for views of the same data, like 24h / 7d / 30d.

API reference

Behaviour and props come from Base UI. See the Base UI Tabs docs.