Tabs

Installation

$npx litefy@latest add tabs
$pnpm dlx litefy@latest add tabs
$yarn dlx litefy@latest add tabs
$bun --bun litefy@latest add tabs

Usage

The basic tabs implementation with uncontrolled state. Tabs is options-driven: declare each tab with value, label and content.

Manage your account settings and preferences.

"use client";import { Tabs } from "@/ui";export default function TabsBasicDemo() {  return (    <Tabs      defaultValue="account"      options={[        {          value: "account",          label: "Account",          content: "Manage your account settings and preferences.",        },        {          value: "password",          label: "Password",          content: "Change your password and security settings.",        },        {          value: "notifications",          label: "Notifications",          content: "Configure your notification preferences.",        },      ]}    />  );}

Variants

line is the default and is shown in Basic Usage; the button variant renders each trigger as a standalone button.

Content for tab one with button variant.

"use client";

import { Tabs } from "@/ui";

export default function TabsVariantDemo() {
  return (
    <Tabs
      defaultValue="tab1"
      variant="button"
      options={[
        {
          value: "tab1",
          label: "Tab One",
          content: "Content for tab one with button variant.",
        },
        {
          value: "tab2",
          label: "Tab Two",
          content: "Content for tab two with button variant.",
        },
        {
          value: "tab3",
          label: "Tab Three",
          content: "Content for tab three with button variant.",
        },
      ]}
    />
  );
}

Orientation

Support for both horizontal and vertical tab layouts.

Horizontal (Default)

Horizontal tab content - first tab.

Vertical

Vertical tab content - first tab.

"use client";import { Tabs } from "@/ui";export default function TabsOrientationDemo() {  return (    <div className="flex flex-col gap-8 w-md">      <div>        <h3 className="text-sm font-medium mb-3">Horizontal (Default)</h3>        <Tabs          defaultValue="horizontal1"          orientation="horizontal"          options={[            {              value: "horizontal1",              label: "First",              content: "Horizontal tab content - first tab.",            },            {              value: "horizontal2",              label: "Second",              content: "Horizontal tab content - second tab.",            },            {              value: "horizontal3",              label: "Third",              content: "Horizontal tab content - third tab.",            },          ]}        />      </div>      <div>        <h3 className="text-sm font-medium mb-3">Vertical</h3>        <Tabs          defaultValue="vertical1"          orientation="vertical"          options={[            {              value: "vertical1",              label: "First",              content: "Vertical tab content - first tab.",            },            {              value: "vertical2",              label: "Second",              content: "Vertical tab content - second tab.",            },            {              value: "vertical3",              label: "Third",              content: "Vertical tab content - third tab.",            },          ]}        />      </div>    </div>  );}

API Reference

High-level Components

Options-driven container managing the active value and rendering TabsList, TabsTrigger and TabsContent parts with all state passed as parameters — no context.

Prop	Type	Default	Description
`options`	`TabsOptionConfig[]`	-	Tab definitions
`defaultValue`	`string`	-	Initial active tab value (uncontrolled mode). Falls back to the first option's value
`value`	`string`	-	Active tab value (controlled mode)
`onValueChange`	`(value: string) => void`	-	Callback when active tab changes
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout orientation
`variant`	`'button' \| 'line'`	`'line'`	Visual style variant
`className`	`ClassNameValue`	-	Custom CSS class, applied to the root
`...props`	`React.ComponentProps<"div">`	-	Supports all native div props (except `className`)

TabsOptionConfig

Property	Type	Description
`value`	`string`	Unique identifier for the tab
`label`	`React.ReactNode`	Content of the tab trigger
`content`	`React.ReactNode`	Content of the tab panel
`disabled`	`boolean`	Disable the tab

Composable Components

TabsList

Container for the tab trigger buttons. Communicates only through parameters.

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout orientation
`autoScroll`	`boolean`	`false`	Renders prev/next scroll buttons and hides the scrollbar (horizontal only)
`activeValue`	`string`	-	Currently active value; scrolls the active trigger into view when it changes
`className`	`ClassNameValue`	-	Custom CSS class
`...props`	`React.ComponentProps<"div">`	-	Supports all native div props (except `className`)

TabsTrigger

Individual tab button. Receives its active state and change callback purely as parameters.

Prop	Type	Default	Description
`value`	`string`	-	Unique identifier for the tab
`active`	`boolean`	`false`	Whether the tab is active, drives `data-state` and `aria-selected`
`onValueChange`	`(value: string) => void`	-	Called with the tab's own `value` on click or Enter/Space
`variant`	`'button' \| 'line'`	`'line'`	Visual style variant
`disabled`	`boolean`	`false`	Disable the tab
`className`	`ClassNameValue`	-	Custom CSS class
`...props`	`React.ComponentProps<"button">`	-	Supports all native button props (except `className`)

TabsContent

Panel rendered when active is true; returns null otherwise. Wrap content in React.lazy() to defer the import until the tab becomes active.

Prop	Type	Default	Description
`value`	`string`	-	Unique identifier, used to derive the panel id and `aria-labelledby`
`active`	`boolean`	`false`	Whether the panel is visible
`className`	`ClassNameValue`	-	Custom CSS class
`...props`	`React.ComponentProps<"div">`	-	Supports all native div props (except `className`)

Lazy Loading

TabsContent returns null while inactive, so wrapping the content in lazy() defers the import:

Profile content

"use client";

import { lazy, Suspense } from "react";
import { Tabs } from "@/ui";

const LazySettingsPanel = lazy(() => import("./lazy-panel"));

export default function TabsLazyDemo() {
  return (
    <Tabs
      defaultValue="profile"
      options={[
        { value: "profile", label: "Profile", content: "Profile content" },
        {
          value: "settings",
          label: "Settings",
          content: (
            <Suspense fallback={null}>
              <LazySettingsPanel />
            </Suspense>
          ),
        },
      ]}
    />
  );
}

Tabs

Horizontal (Default)

Vertical

On this page