Hewn
Components

Components

Tabs

Sectioned content with a shared motion indicator.

newfree

Install

@hewnui/ui · hewnui

Terminal
# Available at launch: npm install @hewnui/ui
Terminal
# Available at launch: pnpm add @hewnui/ui
Terminal
# Available at launch: yarn add @hewnui/ui
Terminal
# Available at launch: bun add @hewnui/ui
Terminal
# Available at launch: npx hewnui@latest add tabs

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

TSX
import { Tab, TabList, TabPanel, Tabs } from "@hewnui/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

API reference

Props for Tabs from @hewnui/ui/tabs. Generated from component types — not hand-written.

Prop

Type

Toast

Motion-aware notification stack with global provider.

Breadcrumbs

Hierarchical trail linking ancestors to the current page.

On this page

UsageAccessibility