Radio cards

When to use #

Use it for

Plans, shipping methods and modes where each option needs explaining.
Two to four options.

Skip it when

Options are one word each; use a segmented control.
Several can be chosen; use checkboxes or chips.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/radio-cards.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { RadioCards } from "@/components/ui/radio-cards"

const team = [
  { value: "mara", label: "Mara Chen" },
  { value: "noor", label: "Noor Haddad" },
  { value: "ivo", label: "Ivo Petrov" },
  { value: "sana", label: "Sana Okafor" },
];

export function PlanCards() {
  const [plan, setPlan] = useState("team");
  return (
    <div className="w-full max-w-xl">
      <RadioCards
        label="Plan"
        options={[
          { value: "solo", title: "Solo", description: "One person, every part.", price: "$9" },
          { value: "team", title: "Team", description: "Shared libraries and seats.", price: "$29" },
          { value: "studio", title: "Studio", description: "Unlimited seats and support.", price: "$99" },
        ]}
        value={plan}
        onValueChange={setPlan}
      />
    </div>
  );
}

API reference #

RadioCards

component

PropTypeDefault

label *string—

options *readonly RadioCardOption[]—

valuestring—

defaultValuestring—

onValueChange((value: string) => void)—

namestring—

classNamestring—

It exposes radiogroup and radio semantics, with aria-label, aria-checked, aria-disabled and aria-hidden kept in step with state.

KeyBehaviour

→Moves to the next item or value.

↓Moves to the next item or value.

←Moves to the previous item or value.

↑Moves to the previous item or value.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.