How do I install the radio group?

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

How does the dot move?

It shares a layout id across items, so it glides instead of popping in place.

The shadcn Radio Group with a filled dot that shares a layout id across items, so it glides from one option to the next instead of popping in place.

pnpm dlx shadcn@latest add @ditherui/radio-group

Monthly

Yearly ($, save 20%)

Lifetime

Disabled

$ pnpm dlx shadcn@latest add @ditherui/radio-group

PropTypeDefault

valuestring—

defaultValuestring—

onValueChange(value: string) => void—

disabledbooleanfalse

Use it to pick one option from a few. It is the shadcn Radio Group with a filled dot that glides between options.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.