Tabs

Panelled navigation with a sliding indicator, five variants and both orientations.

Source: 1 file
Dependencies: none
Playground: no

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

Underline

Overview

Everything shipping across the workspace.

Production

Healthy · 42ms p95

Preview

Building · started 2m ago

<Tabs variant="underline" />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Tabs, TabsList, TabsTrigger, TabsContent } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

tabs-example.tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from "kipui";

<Tabs defaultValue="preview" variant="segmented">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code" badge="4">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">…</TabsContent>
  <TabsContent value="code">…</TabsContent>
</Tabs>

`defaultValue` is required — tabs with nothing selected are a state users can't get back to.
Arrow keys move between triggers; the indicator follows the selection rather than the pointer.

API reference

Transcribed from the component's own types. Props with no default are required.

Tabs

Prop	Default	Description
defaultValuestring	required	Tab open before anything is clicked. Omit when passing `value`.
valuestring	required	Controlled selection.
onValueChange(value: string) => void	required	Fires with the newly selected tab.
variant"underline" \| "segmented" \| "pill" \| "ghost" \| "bordered"	"underline"	Look of the list and indicator.
size"sm" \| "md" \| "lg"	"md"	Trigger height and type scale.
orientation"horizontal" \| "vertical"	"horizontal"	Layout and arrow-key axis.
fullWidthboolean	false	Triggers share the container width evenly.
indicatorClassNamestring	required	Restyles the fill that slides behind the selected tab.

TabsTrigger

Prop	Default	Description
valuestring	required	Required. Matches a `TabsContent`.
iconReactNode	required	Leading icon. Omit children for an icon-only trigger.
badgeReactNode	required	Count or label chip.