Tabs

A tabbed interface component with multiple variants, icon support, and disabled state.

PREVIEW

Default

Overview

This is the overview tab content.

With Icons

Profile

Manage your profile settings here.

Ghost + Disabled

Tab One

Content for tab one.

INSTALLATION

bash
# Required
npm install @kennbalino/kui

# Optional — only if you want to use CVA, cn(), or lucide icons directly
npm install class-variance-authority clsx tailwind-merge lucide-react

USAGE

tsx
"use client";

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@kennbalino/kui";
import { User, Settings } from "lucide-react";

export default function MyComponent() {
  return (
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="details">Details</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        Overview content here.
      </TabsContent>
      <TabsContent value="details">
        Details content here.
      </TabsContent>
      <TabsContent value="settings">
        Settings content here.
      </TabsContent>
    </Tabs>
  );
}

// List variants
<TabsList variant="default">Tab 1</TabsList>
<TabsList variant="outline">Tab 2</TabsList>
<TabsList variant="ghost">Tab 3</TabsList>

// With icons
<TabsTrigger value="profile" icon={<User size={13} />}>
  Profile
</TabsTrigger>

// Disabled tab
<TabsTrigger value="tab" disabled>Disabled</TabsTrigger>

// Controlled
<Tabs value={activeTab} onValueChange={setActiveTab}>
  Tab 4
</Tabs>

PROPS

PropTypeDefaultDescription
defaultValue*string—The value of the tab that is active by default.
valuestring—Controlled active tab value.
onValueChange(value: string) => void—Callback fired when the active tab changes.
variant (list)default | outline | ghostdefaultControls the visual style of the tabs list.
disabledbooleanfalseDisables a tab trigger.
iconReactNode—Icon displayed on the left of a tab trigger.