A segmented control whose selection pill stretches like rubber toward the new option, leading with one edge and letting the other catch up. Dragging across segments works too.
Revenue
$48,210
npx shadcn@latest add https://hyperblur.dev/r/micro-rubber-segment.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-rubber-segment.tsx.
import { MicroRubberSegment } from "@/components/hyperblur/micro-rubber-segment"
<MicroRubberSegment aria-label="Range" defaultValue="30d" options={[{ value: "7d", label: "7D" }, { value: "30d", label: "30D" }, { value: "90d", label: "90D" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value: string; label: ReactNode; disabled?: boolean }[] | Day, Week, Month | The segments, in order. |
| value | string | Controlled selection. Pair with onChange. | |
| defaultValue | string | Initial selection when uncontrolled. Falls back to the first enabled option. | |
| accent | string | "#2f7bff" | Pill color. |
| idle | boolean | true | Cycle the pill through the options until the pointer or focus arrives. The selected value does not change. |
| onChange | (value: string) => void | Called with the newly selected value. | |
| className / style / ...rest | HTMLAttributes<HTMLDivElement> | Forwarded to the radiogroup root. Pass aria-label to name it. |