Browse components
Rubber Segment
Segmented control whose pill indicator stretches like rubber toward the new option, thins out as it pulls, then snaps shut.
Installation
npx shadcn@latest add @glint-ui/rubber-segmentFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/rubber-segment.json
Usage
import { RubberSegment } from "@/components/ui/rubber-segment";
<RubberSegment options={["Day", "Week", "Month"]} value={range} onChange={setRange} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | string[] | ["Day","Week","Month","Year"] | Segment labels. |
| stretch | number | 0.6 | How stretchy the indicator is. |
| label | string | "View" | Accessible name of the group. |
| value | ReactNode | — | Controlled selected option, pair with onChange. |
| defaultValue | ReactNode | — | Initial option when uncontrolled (defaults to the first). |
| onChange | ReactNode | — | (value: string) => void. |
| className | string | — | Extra classes for the root element. |