Browse components
Jelly Radio
A radio group with one gooey dot that stretches as it slides to the new option, splats on landing and jiggles back into shape.
Installation
npx shadcn@latest add @glint-ui/jelly-radioFirst 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/jelly-radio.json
Usage
import { JellyRadio } from "@/components/ui/jelly-radio";
<JellyRadio
options={[
{ value: "starter", label: "Starter" },
{ value: "pro", label: "Pro" },
]}
value={plan}
onValueChange={setPlan}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Plan" | Group label. |
| defaultValue | "starter" | "pro" | "enterprise" | "pro" | Initial value when uncontrolled. |
| color | string | "#fb7185" | Dot and ring color. |
| wobble | number | 0.6 | How jelly-like the dot is. |
| options | ReactNode | — | Array of { value, label, description? }. |
| value | ReactNode | — | Controlled value. Pair with onValueChange. |
| onValueChange | ReactNode | — | Called with the newly selected value. |
| name | ReactNode | — | Form field name for the native radios. |
| className | string | — | Extra classes for the root element. |