Segmented Tabs

A segmented control on top of shadcn Tabs: a pill track with a thumb that springs to the active segment, with optional panels.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { SegmentedTabs } from '@/components/component-kit/items/segmented-tabs';
2
3export function Example() {
4  return (
5    <SegmentedTabs
6      aria-label="Billing period"
7      defaultValue="monthly"
8      tabs={[
9        { value: 'monthly', label: 'Monthly' },
10        { value: 'yearly', label: 'Yearly' },
11      ]}
12    />
13  );
14}

Props

Segmented Tabs properties
Prop	Type	Default	Description
`tabs`	`SegmentedTab[]`	`—`	Segments with a value, label and optional icon, disabled flag or content panel.
`size`	`"sm" \| "default" \| "lg"`	`default`	Track height: 32, 36 or 40px.
`fullWidth`	`boolean`	`false`	Stretch the control and give every segment equal width.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { SegmentedTabs } from '@/components/component-kit/items/segmented-tabs';
2
3export function Example() {
4  return (
5    <SegmentedTabs
6      aria-label="Billing period"
7      defaultValue="monthly"
8      tabs={[
9        { value: 'monthly', label: 'Monthly' },
10        { value: 'yearly', label: 'Yearly' },
11      ]}
12    />
13  );
14}

Prop

Type

Default

Description

tabs

SegmentedTab[]

—

Segments with a value, label and optional icon, disabled flag or content panel.

size

"sm" | "default" | "lg"

default

Track height: 32, 36 or 40px.

fullWidth

boolean

false

Stretch the control and give every segment equal width.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { SegmentedTabs } from '@/components/component-kit/items/segmented-tabs';
2
3export function Example() {
4  return (
5    <SegmentedTabs
6      aria-label="Billing period"
7      defaultValue="monthly"
8      tabs={[
9        { value: 'monthly', label: 'Monthly' },
10        { value: 'yearly', label: 'Yearly' },
11      ]}
12    />
13  );
14}

Prop

Type

Default

Description

tabs

SegmentedTab[]

—

Segments with a value, label and optional icon, disabled flag or content panel.

size

"sm" | "default" | "lg"

default

Track height: 32, 36 or 40px.

fullWidth

boolean

false

Stretch the control and give every segment equal width.

Segmented Tabs

A segmented control on top of shadcn Tabs: a pill track with a thumb that springs to the active segment, with optional panels.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { SegmentedTabs } from '@/components/component-kit/items/segmented-tabs';
2
3export function Example() {
4  return (
5    <SegmentedTabs
6      aria-label="Billing period"
7      defaultValue="monthly"
8      tabs={[
9        { value: 'monthly', label: 'Monthly' },
10        { value: 'yearly', label: 'Yearly' },
11      ]}
12    />
13  );
14}

Props

Segmented Tabs properties
Prop	Type	Default	Description
`tabs`	`SegmentedTab[]`	`—`	Segments with a value, label and optional icon, disabled flag or content panel.
`size`	`"sm" \| "default" \| "lg"`	`default`	Track height: 32, 36 or 40px.
`fullWidth`	`boolean`	`false`	Stretch the control and give every segment equal width.