Can cards contain links?

Avoid interactive content inside a card radio; the whole card is one button.

FormsAnimated

Radio Group

Radio buttons and selectable cards with springing dots and crop marks.

A radio group picks exactly one option. Cuelark adds RadioGroupCard, where a whole card is the radio (great for pricing plans and shipping options): the checked card is framed by crop marks that close in on it, and dots spring into place.

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/radio-group.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/radio-group.

Builds on: motion

Usage

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

<RadioGroup defaultValue="a">
  <RadioGroupItem value="a" id="a" />
  <RadioGroupItem value="b" id="b" />
</RadioGroup>

Motion

How it moves

Dots spring in with an elastic ease; a checked RadioGroupCard gets crop marks that close in (marksIn).

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

RadioGroup

Extends Radix RadioGroup.Root.

RadioGroupItem

Prop	Type	Default	Description
value	string	—	Value submitted when checked.

RadioGroupCard

A Radix RadioGroup.Item styled as a card; put any content inside.

Prop	Type	Default	Description
value	string	—	Value submitted when checked.

Accessibility

Arrow keys move and select within the group; Tab leaves it.
Give the group an aria-label or a visible legend.

FAQ

Also searched as: react radio group · radio card · shadcn radio group · pricing plan selector · radio button component

Preview