Lucent UI
← TooltipTabsCollapsible →
✦ LLM-ready

Tabs

molecule

Horizontal tab bar with associated content panels. Supports controlled and uncontrolled modes and disabled tabs.

"Add a Tabs component from lucent-ui with three panels: Overview, Details, and Settings. Use defaultValue to set the initial active tab."

Usage

React / JSX
import { Tabs } from 'lucent-ui'

<Tabs
  defaultValue="one"
  tabs={[
    { value: "one", label: "Tab One", content: <Text size="sm">Content for Tab One.</Text> },
    { value: "two", label: "Tab Two", content: <Text size="sm">Content for Tab Two.</Text> },
  ]} />

Installation

pnpm add lucent-ui

API Reference

Tabs props — * required

PropTypeDefaultDescription
tabs*TabItem[]—Array of { value, label, content?, disabled? } tab definitions. When no tab has content, panel rendering is skipped (header-only / controlled mode).
defaultValuestring—Uncontrolled initial active tab value.
valuestring—Controlled active tab value.
onChange(value: string) => void—Called when the active tab changes.
styleReact.CSSProperties—Inline styles for the tabs wrapper.