Component · tablist / tab / tabpanel

Tabs

A segmented control that switches panels.

Name, email and avatar.

Install

npx @lazizbekio/mitame add tabs

Usage

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

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-full max-w-sm">
      <TabsList aria-label="Settings">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="privacy">Privacy</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
      </TabsList>
      <TabsPanel value="account" className="text-sm">Name, email and avatar.</TabsPanel>
      <TabsPanel value="privacy" className="text-sm">Who can see your profile.</TabsPanel>
      <TabsPanel value="billing" className="text-sm">Plan and invoices.</TabsPanel>
    </Tabs>
  );
}

Props

Prop	Type	Default	Description
`Tabs value / defaultValue`	`string`	—	The active tab.
`Tabs onValueChange`	`(value: string) => void`	—	Called when the tab changes.
`TabsTrigger value`	`string`	—	Which panel it opens.
`TabsPanel value`	`string`	—	Shown when its value is active.

Keyboard

Key	Does
`← →`	Move and activate
`Home / End`	First / last

Styling

Every part has a data-slot starting with tabs, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.