A
Auralix UI

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Preview

Make changes to your account here.

Installation

bash
npx auralix-ui add tabs

Usage

Basic Tabs

tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/Tabs";

<Tabs defaultValue="account">
  <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>

Props

NameTypeDefaultDescription
defaultValuestring-The value of the tab to activate by default.
childrenReactNode-TabsList and TabsContent components.

Variants

Pill
Line
Segmented
SwitchAccordion