Navigation

Tabs.

Related views, sharing the same space.

LIVE PREVIEWTry it. It works.

The essentials, in one place. Use the arrow keys to move between views.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/tabs.json

Registry setup · Open the playground

Usage

<Tabs label="Project views" items={[{value:"overview",label:"Overview",content:"Project summary"},{value:"activity",label:"Activity",content:"Recent changes"}]} />

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Built on Base UI Tabs. Each item has value, label, content and optional disabled. Supports value/onValueChange and defaultValue. Use arrow keys to navigate tabs.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.