A radio group whose selected dot squashes and stretches like jelly when it is chosen, while the label slides over. Arrow keys work out of the box.
Delivery
npx shadcn@latest add https://hyperblur.dev/r/radio-jelly.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/radio-jelly.tsx.
import { RadioJelly } from "@/components/hyperblur/radio-jelly"
<RadioJelly options={[{ value: "a", label: "Monthly" }, { value: "b", label: "Yearly" }]} defaultValue="a" />| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value: string; label: ReactNode; description?: ReactNode; disabled?: boolean }[] | The choices to show. | |
| value | string | Controlled value. Pair with onValueChange. | |
| defaultValue | string | Initial value when uncontrolled. | |
| onValueChange | (value: string) => void | Called with the new value when the selection changes. | |
| name | string | Form field name. A unique one is created when missing. | |
| accent | string | "#2f7bff" | Color of the dot, the ring and the focus outline. |
| size | number | 22 | Diameter of the radio ring in pixels. |
| direction | "vertical" | "horizontal" | "vertical" | Stack the options in a column or lay them out in a row. |
| disabled | boolean | false | Disable every option. |