@fydemy/ui
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>