Option Card

A single-select card that pairs a visual thumbnail with a radio indicator. Use OptionCard when you need full control over individual cards, or wrap multiple options in OptionCardGroup for a self-contained, stateful group.

Display preference

Classic use-case: picking a colour-scheme preference. The OptionCardGroup component manages selection state internally when uncontrolled.

Banner appearance

Thumbnails can represent any visual concept — here, different header banner treatments.

Colour swatches

The thumbnail prop accepts any React node — plain colour blocks work well for compact palette pickers.

Individual cards

Use OptionCard directly when you need to inject custom selection logic or intersperse cards with other layout elements. Pass a shared selectedValue and onSelect handler to all cards.