Components
Segmented
A recessed track with a lifted pill — never three stacked outlines.
Showing the week
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/segmented.jsonThe recess is the whole idea
The track is bg/sunken with no outline at all, and the active segment is
bg/raised with Shadow/Button. The first version of this control had an
outline on the track and on the pill and on the container, which draws the
same edge three times and reads as a wireframe.
The track uses bg/sunken rather than bg/subtle because bg/subtle is itself
a page colour — a track using it disappears on exactly the screens that need it.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | string[] | — | Segment labels. |
| value | string | — | Controlled selection. Omit to let the control manage its own. |
| onChange | (v: string) => void | — | Fires on selection. |
| fill | boolean | false | Stretch segments to the full width — used on phone screens. |