Tabs

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

Workspace overview for the selected environment.

Installation

Import from the package. Do not run shadcn add in your app.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@carsxe/design-system/components/tabs"

Usage

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@carsxe/design-system/components/tabs"

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account panel</TabsContent>
  <TabsContent value="password">Password panel</TabsContent>
</Tabs>

Default

Overview content

API Reference

Prop	Type	Default
variant	"default" \| "line" (TabsList)	"default"
defaultValue	string (Tabs)	—