Tabs

Navigation

Segmented navigation with a sliding active pill.

Live preview

A clean segmented control with a sliding active pill and clear content panels.

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { Tabs } from "@nphuonha/ui-kit";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<Tabs items={items} defaultValue="overview" />

Tabs can hold any content, not only text.

Settings tabs

Workspace name

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
items	TabItem[]	—	Value/label/content entries.
value	string	—	Controlled active value.
defaultValue	string	—	Uncontrolled initial value.
onValueChange	(value: string) => void	—	Called when the active tab changes.
listClassName	string	—	Extra classes for the tab list.