Tabs

Tabs with manual activation, roving focus and an animated indicator.

Installation

npx nuecrea-ui add tabs

Usage

import * as Tabs from '@/components/ui/tabs';

export default function TabsStory() {
  return (
    <main className="grid gap-8">
      <Tabs.Root defaultValue="overview">
        <Tabs.List>
          <Tabs.Tab value="overview">
            Overview
          </Tabs.Tab>
          <Tabs.Tab value="projects">
            Projects
          </Tabs.Tab>
          <Tabs.Tab value="billing" disabled>
            Billing
          </Tabs.Tab>
          <Tabs.Tab value="account">
            Account
          </Tabs.Tab>
          <Tabs.Indicator />
        </Tabs.List>
        <Tabs.Panel value="overview">
          Workspace stats and activity.
        </Tabs.Panel>
        <Tabs.Panel value="projects">
          Milestones and deadlines.
        </Tabs.Panel>
        <Tabs.Panel value="billing" keepMounted>
          Plans and invoices.
        </Tabs.Panel>
        <Tabs.Panel value="account">
          Profile and preferences.
        </Tabs.Panel>
      </Tabs.Root>

      <Tabs.Root defaultValue="general" orientation="vertical">
        <Tabs.List>
          <Tabs.Tab value="general">
            General
          </Tabs.Tab>
          <Tabs.Tab value="security">
            Security
          </Tabs.Tab>
          <Tabs.Indicator />
        </Tabs.List>
        <Tabs.Panel value="general">
          Name, language and time zone.
        </Tabs.Panel>
        <Tabs.Panel value="security">
          Password and two-factor authentication.
        </Tabs.Panel>
      </Tabs.Root>
    </main>
  );
}

API reference

Tabs.Root

Groups the tabs and panels; owns the active value. Renders <div>.

Prop	Type	Default	Description
`value`	`unknown`	—	Controlled active value.
`defaultValue`	`unknown`	—	Initial active value. Defaults to the first tab.
`orientation`	`'horizontal' \| 'vertical'`	`"horizontal"`	Arrow-key axis and layout.

Event	Payload	Description
`onValueChange`	`unknown`	Fired when a tab is activated. Angular: the `value` model's change event.

Data attribute	Present when
`data-orientation`	always: horizontal \| vertical
`data-activation-direction`	always: left \| right \| up \| down \| none, relative to the previous active tab

Tabs.List

The tablist. Arrow keys move focus (looping), Home/End jump. Renders <div> with role tablist.

Prop	Type	Default	Description
`activateOnFocus`	`boolean`	`false`	Activate tabs as arrow keys focus them.
`loopFocus`	`boolean`	`true`	Wrap focus at the ends.

Data attribute	Present when
`data-orientation`	always: horizontal \| vertical
`data-activation-direction`	always: left \| right \| up \| down \| none, relative to the previous active tab

Tabs.Tab

A tab button. Disabled tabs stay focusable but cannot be activated. Renders <button> with role tab.

Prop	Type	Default	Description
`value`	`unknown`	—	Required. Matches a Panel's value.
`disabled`	`boolean`	`false`	Cannot be activated (aria-disabled).

Data attribute	Present when
`data-orientation`	always: horizontal \| vertical
`data-disabled`	disabled
`data-activation-direction`	always: left \| right \| up \| down \| none, relative to the previous active tab
`data-active`	the active tab

Tabs.Indicator

Highlights the active tab, positioned by CSS variables. Renders <span> with role presentation.

Data attribute	Present when
`data-orientation`	always: horizontal \| vertical
`data-activation-direction`	always: left \| right \| up \| down \| none, relative to the previous active tab

CSS variable	Description
`--active-tab-left`	Active tab left in px, relative to the list.
`--active-tab-right`	Active tab right in px, relative to the list.
`--active-tab-top`	Active tab top in px, relative to the list.
`--active-tab-bottom`	Active tab bottom in px, relative to the list.
`--active-tab-width`	Active tab width in px, relative to the list.
`--active-tab-height`	Active tab height in px, relative to the list.

Tabs.Panel

Content for one tab. Hidden panels are not rendered (React) or hidden (Angular) unless keepMounted. Renders <div> with role tabpanel.

Prop	Type	Default	Description
`value`	`unknown`	—	Required. Matches a Tab's value.
`keepMounted`	`boolean`	`false`	Keep in the DOM while hidden.

Data attribute	Present when
`data-orientation`	always: horizontal \| vertical
`data-activation-direction`	always: left \| right \| up \| down \| none, relative to the previous active tab
`data-hidden`	hidden (keepMounted) or animating out
`data-index`	always: panel index (React counts mounted panels only)
`data-starting-style`	animating in
`data-ending-style`	animating out

Keyboard

Key	Action
`ArrowRight / ArrowDown`	Focus next tab (by orientation), wrapping.
`ArrowLeft / ArrowUp`	Focus previous tab, wrapping.
`Home / End`	Focus first / last tab.
`Enter / Space`	Activate the focused tab.
`Tab`	Move focus into the active panel.