Atoms

Radio Group Card

A card-style radio group for visual selection with optional children content.

FormanceCustom component built for Formance products.

Installation#

npx shadcn@latest add @formance/radio-group-card

Install the following dependencies:

npm install radix-ui lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { RadioGroupCard, RadioGroupCardItem } from '@/components/ui/radio-group-card'

<RadioGroupCard defaultValue="ledger" className="flex flex-wrap gap-3">
  <RadioGroupCardItem value="ledger" label="Ledger" />
  <RadioGroupCardItem value="payments" label="Payments" />
  <RadioGroupCardItem value="wallets" label="Wallets" />
</RadioGroupCard>

Compound Components

Compose the pieces you need:

<RadioGroupCard />Root container wrapping radio card items.

<RadioGroupCardItem />Individual card with label, indicator, and optional children.

Command Menu