Radio Card

A card-based exclusive selector for pricing plans, environments, and workflow profiles that need more context than a standard radio.

Preview & Interactive Laboratory

Plan Selection

Deployment Profile

Usage & Implementation

<RadioCardGroup defaultValue="starter" onValueChange={setPlan} className="grid gap-4 md:grid-cols-3">
  <RadioCardItem value="starter" title="Starter" description="Small team rollout" />
</RadioCardGroup>
React / Tailwind

Granular Customization

1

Group Grid

Controls the card layout, spacing, and responsive columns.

className={`className`}
2

Card Surface

Overrides the card shell for focused states and hover styling.

className={`RadioCardItem className='...'`}
3

Variant

Use the glass shell for premium dashboard panels.

className={`variant='glass'`}

API Reference (Props)

PropTypeDefaultDescription
valuestring-Controlled selected card value.
defaultValuestring-Initial selected card when uncontrolled.
onValueChange(value: string) => void-Called whenever the selected card changes.
variant'default' | 'glass''default'Changes the card shell treatment for the entire group.