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.

Usage

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

Import components from @bld8/ui and include @bld8/ui/styles.css once. Wrap the application 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.