Tabs

A set of layered sections of content that allow users to navigate between different views.

1. Import

Import the Tabs component from the design system.

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

2. Props

Tabs component props.

Prop	Type	Default
defaultValue	string	--
value	string	--
onValueChange	(value: string) => void	--
className	string	--

3. Usages

Common Tabs patterns and configurations.

Make changes to your account here.

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

export function TabsDemo() {
  return (
    <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>
  );
}