Tabs

Roving-focus tabs with orientation and RTL support.

Group: Layout · Import path: @orionshub/lucent/tabs · Client component — ships a "use client" boundary.

Import

import { Tabs } from '@orionshub/lucent'
import '@orionshub/lucent/styles.css' // once, at your app root

Examples

Horizontal tabs

Horizontal tabs

Show source

export function TabsBasic() {
  return (
    <Tabs.Root defaultValue="overview" style={{ width: 320 }}>
      <Tabs.List aria-label="Sections">
        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
        <Tabs.Trigger value="specs">Specs</Tabs.Trigger>
        <Tabs.Trigger value="reviews">Reviews</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="overview"><Text muted>Roving focus, orientation, and RTL.</Text></Tabs.Content>
      <Tabs.Content value="specs"><Text muted>Automatic activation by default.</Text></Tabs.Content>
      <Tabs.Content value="reviews"><Text muted>Panels swap with no layout shift.</Text></Tabs.Content>
    </Tabs.Root>
  )
}

Props

TabsList

This component forwards native element props. It exposes no additional public props, or its props are documented inline above.

TabsTrigger

This component forwards native element props. It exposes no additional public props, or its props are documented inline above.

TabsContent

This component forwards native element props. It exposes no additional public props, or its props are documented inline above.

Guidance

One-time CSS import

Import the compiled stylesheet once at your app root: import '@orionshub/lucent/styles.css'. Components ship stable class names and read design tokens from CSS custom properties — there is no style runtime. See CSS Import.

Transparency & solid mode

Every glass surface reads --lucent-glass-opacity (0.60–1.0). Dial it at runtime with setGlassOpacity(), or switch to setContrast('solid') for a fully opaque, high-contrast rendering. See Transparency & Solid Mode.

RTL

Authored with CSS logical properties — set dir="rtl" on a parent (or the document) and layout mirrors with no JS. Toggle RTL from the glass-controls panel to preview. See RTL Support.

SSR / Next.js

Client component — ships a "use client" boundary. All components are safe to import in a Server Component tree; interactive ones carry their own "use client" boundary. See SSR & Next.js.