Navigation

Tabs

Switch between panels.

Import

tsx

import { Tabs } from "@cronus-ui/ui";

bash

npx cronus-ui add tabs

Examples

Three tabs

Switch between related panels of content within a single surface.

Manage your account details and public profile.

tsx

<Tabs defaultValue="account" className="w-full max-w-md">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="team">Team</TabsTrigger>
  </TabsList>
  <TabsContent value="account" className="pt-4">
    <p className="text-sm text-fg-secondary">
      Manage your account details and public profile.
    </p>
  </TabsContent>
  <TabsContent value="password" className="pt-4">
    <p className="text-sm text-fg-secondary">
      Change your password and configure two-factor authentication.
    </p>
  </TabsContent>
  <TabsContent value="team" className="pt-4">
    <p className="text-sm text-fg-secondary">
      Invite teammates and manage their roles and permissions.
    </p>
  </TabsContent>
</Tabs>