Tabs Component

Line Variant

Profile Information

This is the profile tab content. You can put any content here.

It could include user information, settings, etc.

Boxed Variant

Profile Information

This is the profile tab content. You can put any content here.

It could include user information, settings, etc.

Different Sizes

Profile Information

This is the profile tab content. You can put any content here.

It could include user information, settings, etc.

Profile Information

This is the profile tab content. You can put any content here.

It could include user information, settings, etc.

Usage Examples

Basic Tabs

import { Tabs } from "@/components/tabs";

const tabs = [
  {
    id: "profile",
    title: "Profile",
    content: <div>Profile content</div>
  },
  {
    id: "settings",
    title: "Settings",
    content: <div>Settings content</div>
  }
];

<Tabs tabs={tabs} />

Tabs with Line Variant

<Tabs tabs={tabs} variant="line" />

Tabs with Boxed Variant

<Tabs tabs={tabs} variant="boxed" />

Tabs with Different Sizes

<Tabs tabs={tabs} variant="line" size="sm" />
<Tabs tabs={tabs} variant="boxed" size="lg" />