Komponents
Components

Components

Tabs

Sectioned content with a shared motion indicator.

newfree
pnpm add @komponents/uiCanonical TypeScript source · tree-shakeable subpaths

Tabs use React Aria keyboard behavior. When motion is enabled, the active indicator shares a layout spring across tabs.

Pills (Default)

Pill tabs with spring sliding pill indicator.

Line Variant

Sleek underline tab indicator style.

Glass Variant

Frosted glass backdrop fill for modern header bars.

Usage

Snippet
import { Tab, TabList, TabPanel, Tabs } from "@komponents/ui";

<Tabs defaultSelectedKey="overview">
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="tokens">Tokens</Tab>
  </TabList>
  <TabPanel id="overview">Overview content</TabPanel>
  <TabPanel id="tokens">Token content</TabPanel>
</Tabs>

Accessibility

  • Tablist / tab / tabpanel roles
  • Arrow key navigation between tabs
  • Selected tab remains discoverable to assistive tech

Toast

Motion-aware notification stack with global provider.

Breadcrumbs

Hierarchical trail linking ancestors to the current page.

On this page

UsageAccessibility