Segmented Control

Option-based segmented control composed from shadcn Tabs primitives.

Installation

bash

pnpm dlx shadcn@latest add @cs/segmented-control

Usage

tsx

import { SegmentedControl } from "@/components/cs/segmented-control";

tsx

<SegmentedControl defaultValue="month" options={[{ value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "year", label: "Year" }]} />

API Reference

SegmentedControl

Option-based segmented control built on the Tabs primitive.

Props

Name	Type	Default	Description
options *	{ value: string; label: string }[]	-	Segments rendered as tabs.

Dependencies

@base-ui/react @shadcn/tabs