Tabs.

Related views with a complete keyboard model.

import { Tabs } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <Tabs
      label="Project details"
      items={[
        {
          value: "overview",
          label: "Overview",
          content: "Your project at a glance.",
        },
        {
          value: "activity",
          label: "Activity",
          content: "The latest workspace activity.",
        },
      ]}
    />
  );
}

Installation

npm install luminescent

Import luminescent/style.css once at your application root. The example above uses the same package implementation as Storybook.

Variants and states

Use the preview controls to explore the supported variants, sizes, disabled/loading states and reduced motion. Controls appear only where the component exposes the corresponding prop. Theme and glow apply to every component.

Controlled and uncontrolled state

State contract: value / defaultValue / onValueChange. Omit the controlled prop to let the component own its initial state; supply a value and callback when your application owns it. Native uncontrolled fields and state-backed form controls participate in form reset. Controlled state must be reset by the application.

import { useState } from "react";
import { Tabs } from "luminescent";


export function ControlledExample() {
  const [value, setValue] = useState("overview");
  return (
    <Tabs
      label="Details"
      value={value}
      onValueChange={setValue}
      items={[
        { value: "overview", label: "Overview", content: "Overview" },
        { value: "activity", label: "Activity", content: "Activity" },
      ]}
    />
  );
}

API reference

Generated from the source TypeScript interfaces. Native attributes, className, style, aria-* and data-* also pass through to the documented element. Import TabsProps from the package for the full inherited contract.

Accessibility and keyboard

Radix tabs associate each tab and panel. Horizontal arrows or vertical Up/Down, Home/End and disabled skipping are supported. activationMode="manual" waits for Enter/Space. Use a unique value for each item.

Keep labels meaningful and test application-level contrast, focus order and screen-reader output. See the accessibility guide for composition requirements.

Theme customization

import { LuminescentProvider, Tabs } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <LuminescentProvider theme="light" accent="violet" glow="subtle">
      <Tabs
        label="Project details"
        items={[
          {
            value: "overview",
            label: "Overview",
            content: "Your project at a glance.",
          },
          {
            value: "activity",
            label: "Activity",
            content: "The latest workspace activity.",
          },
        ]}
      />
    </LuminescentProvider>
  );
}

Switch between light and dark in the preview, or open the playground for a larger workspace. Custom CSS variables can override spacing, color, typography and effects.

Related components