Segmented

new

Ant Design’s Segmented control — a sliding thumb, icons, disabled options, block width and arrow-key navigation.

3 files · 144 locdeps: clsx, tailwind-merge

Showing the last 7d

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/segmented.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs segmented

import { Segmented } from "@/components/opus/ui/segmented";

<Segmented options={["Day", "Week", "Month"]} value={v} onValueChange={setV} />

Prop	Type	Default	Description
options	(string \| { value, label, icon?, disabled? })[]	—	Segments.
value / defaultValue / onValueChange	string	—	Selection.
size	"sm" \| "md" \| "lg"	"md"	Height.
block	boolean	—	Fill the container with equal segments.