Segmented Control
A recessed, borderless well with one raised thumb that glides between segments on a softly settling spring; labels brighten as the thumb passes under them.
$149 once · every Pro piece
Customize
sm
md
equal
content
Equal or content widths, icons, disabled segments, arrow-key and drag selection, and a fading scroll when there are too many options to fit.
Install
npx shadcn@latest add @obsyde/segmentedNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Segmented } from '@/components/obsyde/ember/segmented/Segmented';
export function Example() {
return (
<Segmented options="Day, Week, Month, Year" value="Week" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/segmented/Segmented.tsxcomponentember/segmented/segmented.cssstylesember/segmented/SegmentedDemo.tsxdemoember/actions-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
optionsOptions | string | 'Day, Week, Month, Year' |
valueValue | string | 'Week' |
sizeSize | 'sm' | 'md' | 'md' |
widthsWidths | 'equal' | 'content' | 'equal' |
fullWidthFull width | boolean | false |
iconsIcons | boolean | false |