ComponentsTrakteer
Tabs
A tabs component
Home
Profile
Settings
This is Home tab.
Usage
npx @fydemy/ui@latest add tabs<Tabs defaultValue="home" className="scheme-only-dark">
<TabsList>
<TabsTrigger value="home">Home</TabsTrigger>
<TabsTrigger value="profile">Profile</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="home">
<p>This is Home tab.</p>
</TabsContent>
<TabsContent value="profile">
<p>This is Profile tab.</p>
</TabsContent>
<TabsContent value="settings">
<p>This is Settings tab.</p>
</TabsContent>
</Tabs>Prop
Type
Examples
With Icons
A tabs component with icons beside the text. Use lucide-react icon is recommended.
Home
Profile
Settings
Welcome to your home dashboard.
<Tabs defaultValue="home">
<TabsList>
<TabsTrigger value="home">
<Home size={18} /> Home
</TabsTrigger>
<TabsTrigger value="profile">
<UserRound size={18} /> Profile
</TabsTrigger>
<TabsTrigger value="settings">
<Settings size={18} /> Settings
</TabsTrigger>
</TabsList>
<TabsContent value="home">
<p>Welcome to your home dashboard.</p>
</TabsContent>
<TabsContent value="profile">
<p>Manage your profile settings here.</p>
</TabsContent>
<TabsContent value="settings">
<p>Configure your application preferences.</p>
</TabsContent>
</Tabs>