Selectable cards backed by native radios. A highlight slides to the chosen card and the radio dot springs in. Arrow keys move the selection.
npx shadcn@latest add https://hyperblur.dev/r/radio-card-group.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/radio-card-group.tsx.
import { RadioCardGroup } from "@/components/hyperblur/radio-card-group"
<RadioCardGroup defaultValue="pro" options={[{ value: "free", label: "Free", meta: "$0" }, { value: "pro", label: "Pro", meta: "$12" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value: string; label: string; description?: string; meta?: string; disabled?: boolean }[] | required | Cards to render. meta is the right aligned text, for example a price. |
| value | string | Controlled value. Pair with onValueChange. | |
| defaultValue | string | Initial value when uncontrolled. | |
| onValueChange | (value: string) => void | Called with the chosen value. | |
| name | string | Radio group name. A unique name is assigned when omitted. | |
| columns | number | 1 | Number of grid columns. |
| accent | string | "#2f7bff" | Highlight and dot color. |
| disabled | boolean | false | Disable every card. |