Tabs

Switches between related panels. Text labels in one row; active tab has a 1px underline.

Preview

In action

Issue

204 module

A poster you can install. Hairline on the active tab only.

When to use

Use it for

Two to six views of the same object that share one place on the page.
orientation="vertical" on TabList for a stacked rail.

Not for

Navigation between pages; use NavigationMenu with real links.
Sequential steps; use Stepper.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Tab, TabList, TabPanel, Tabs } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/tabs.

2. Vendor the source

npx @noorddev/vlak-cli add tabs

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/tabs.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Tab, TabList, TabPanel, Tabs } from "@noorddev/vlak-react";

<Tabs defaultValue="overview">
  <TabList aria-label="Project">
    <Tab value="overview">Overview</Tab>
    <Tab value="activity">Activity</Tab>
    <Tab value="settings">Settings</Tab>
  </TabList>
  <TabPanel value="overview">…</TabPanel>
  <TabPanel value="activity">…</TabPanel>
  <TabPanel value="settings">…</TabPanel>
</Tabs>

Props

Tab

Prop	Type	Default	Description
`value`required	`string`

Also accepts ButtonHTMLAttributes<HTMLButtonElement>.

TabList

Roving tabs: arrows step, Home/End jump, and selection follows focus.

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Stacked tabs answer Up/Down instead of Left/Right.

Also accepts HTMLAttributes<HTMLDivElement>.

TabPanel

Prop	Type	Default	Description
`value`required	`string`

Also accepts HTMLAttributes<HTMLDivElement>.

Tabs

Prop	Type	Default	Description
`value`	`string`
`defaultValue`	`string`
`onValueChange`	`(value: string) => void`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onChange">.

Keyboard

Keys	Does
`Tab`	Moves focus to the selected tab, then into the panel
`Arrow left, Arrow right`	Moves to the previous or next tab and selects it (wraps)
`Arrow up, Arrow down`	The same when orientation is vertical
`Home, End`	First or last tab

Accessibility

TabList is role="tablist" (aria-orientation when vertical); pass aria-label to name it.
Tab is a <button role="tab"> with aria-selected and aria-controls; TabPanel is role="tabpanel" with aria-labelledby, hidden when not selected.
One roving tab stop: only the selected tab is in the tab order.
Controlled with value and onValueChange, or uncontrolled with defaultValue.

Markup

<div class="rs-tabs"><span class="rs-tab rs-tab-active">Overview</span><span class="rs-tab">Activity</span><span class="rs-tab">Settings</span></div>

Classes

.rs-tabs.rs-tabs-vertical.rs-tab.rs-tab-active