Radio Card Group

Selectable cards with animated borders and arrow-key focus.

Installation

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/radio-card-group.json

Manual

Install the dependencies

npm install clsx motion radix-ui tailwind-merge

Add the shared helpers

Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

lib/motion.ts

import type { Transition, Variants } from "motion/react";

/** Durations in seconds. */
export const duration = {
  instant: 0.1,
  quick: 0.18,
  base: 0.28,
  slow: 0.45,
} as const;

/** Cubic-bezier curves. */
export const ease = {
  /** Entering, UI response. */
  out: [0.22, 1, 0.36, 1],
  /** Moving on screen. */
  inOut: [0.65, 0, 0.35, 1],
  /** Sheets and the mobile menu. */
  drawer: [0.32, 0.72, 0, 1],
} as const;

/** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
export const ui = {
  press: { scale: 0.96, duration: 0.12 },
  icon: { type: "spring", duration: 0.3, bounce: 0 },
  popover: { duration: 0.18, ease: ease.out },
  modal: { duration: 0.24, ease: ease.out },
  exitFactor: 0.6,
} as const;

/** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
export const kinetic = {
  heroLetter: { duration: 0.6, ease: ease.out },
  /** Delay per letter, eased so the wave slows toward the end. */
  heroStep: 0.035,
  reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
  /** Two afterimages: lag in seconds and opacity of each. */
  ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
} as const;

/** Spring presets. */
export const spring = {
  snappy: { type: "spring", stiffness: 500, damping: 30 },
  smooth: { type: "spring", stiffness: 260, damping: 26 },
  bouncy: { type: "spring", stiffness: 300, damping: 15 },
} as const satisfies Record<string, Transition>;

/** Stagger between siblings, in seconds (0.03–0.06). */
export const stagger = {
  tight: 0.03,
  base: 0.045,
  loose: 0.06,
} as const;

/** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.base } },
      exit: { opacity: 0, transition: { duration: duration.quick } },
    };
  }
  return {
    hidden: { opacity: 0, y, filter: "blur(4px)" },
    visible: {
      opacity: 1,
      y: 0,
      filter: "blur(0px)",
      transition: { duration: duration.base, ease: ease.out },
    },
    exit: {
      opacity: 0,
      y: -y / 2,
      filter: "blur(4px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
  };
}

/** Scale 0.96 → 1 for popovers, menus and dialogs. */
export function overlayVariants(reduceMotion?: boolean | null): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.quick } },
      exit: { opacity: 0, transition: { duration: duration.instant } },
    };
  }
  return {
    hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
    visible: {
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
    exit: {
      opacity: 0,
      scale: 0.96,
      filter: "blur(2px)",
      transition: { duration: duration.instant + 0.02, ease: ease.out },
    },
  };
}

/** Parent variants that stagger their children in. */
export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
  return {
    hidden: {},
    visible: { transition: { staggerChildren: gap, delayChildren } },
    exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
  };
}

Copy the source

components/ui/radio-card-group/radio-card-group.tsx

"use client";

import { createContext, useContext, useId, useState, type ComponentProps, type ReactNode } from "react";
import { LayoutGroup, motion, useReducedMotion } from "motion/react";
import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
import { cn } from "@/lib/utils";
import { duration, spring } from "@/lib/motion";

const RadioCardContext = createContext<string | undefined>(undefined);

export interface RadioCardGroupProps
  extends Omit<ComponentProps<typeof RadioGroupPrimitive.Root>, "value" | "defaultValue" | "onValueChange" | "asChild"> {
  /** Controlled selected value. */
  value?: string;
  /** Initially selected value when uncontrolled. */
  defaultValue?: string;
  /** Called with the newly selected value. */
  onValueChange?: (value: string) => void;
}

export function RadioCardGroup({ value, defaultValue, onValueChange, className, children, ...props }: RadioCardGroupProps) {
  const [internal, setInternal] = useState(defaultValue);
  const selected = value ?? internal;
  const groupId = useId();

  return (
    <RadioGroupPrimitive.Root
      value={selected ?? ""}
      onValueChange={(next) => {
        if (value === undefined) setInternal(next);
        onValueChange?.(next);
      }}
      className={cn("grid gap-3", className)}
      {...props}
    >
      <RadioCardContext.Provider value={selected}>
        <LayoutGroup id={groupId}>{children}</LayoutGroup>
      </RadioCardContext.Provider>
    </RadioGroupPrimitive.Root>
  );
}

export interface RadioCardProps
  extends Omit<ComponentProps<typeof RadioGroupPrimitive.Item>, "asChild" | "children" | "title"> {
  /** Value submitted and reported when this card is chosen. */
  value: string;
  /** Main label. */
  title: ReactNode;
  /** Supporting text under the title. */
  description?: ReactNode;
  /** Icon shown at the start of the card. */
  icon?: ReactNode;
  /** Content at the end of the card, such as a price. */
  aside?: ReactNode;
}

export function RadioCard({ value, title, description, icon, aside, className, ...props }: RadioCardProps) {
  const selected = useContext(RadioCardContext);
  const reduceMotion = useReducedMotion();
  const checked = selected === value;

  return (
    <RadioGroupPrimitive.Item
      value={value}
      className={cn(
        "group relative flex w-full cursor-pointer items-start gap-3 rounded-lg border border-border bg-background p-4 text-left shadow-xs outline-none",
        "transition-[border-color,box-shadow,transform] duration-150 hover:border-[color-mix(in_oklab,var(--border),var(--foreground)_18%)] active:scale-[0.99]",
        "focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
        className,
      )}
      {...props}
    >
      {/* One ring per group, shared by layoutId, so it glides to the newly chosen card. */}
      {checked ? (
        <motion.span
          layoutId="radio-card-ring"
          aria-hidden="true"
          className="pointer-events-none absolute -inset-px border-2 border-primary"
          style={{ borderRadius: 14 }}
          transition={reduceMotion ? { duration: 0 } : spring.snappy}
        />
      ) : null}
      {icon ? (
        <span
          aria-hidden="true"
          className={cn(
            "relative flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-muted transition-colors duration-200 [&_svg]:size-4",
            checked ? "text-primary" : "text-muted-foreground",
          )}
        >
          {icon}
        </span>
      ) : null}
      <span className="relative min-w-0 flex-1">
        <span className="block text-sm font-medium text-foreground">{title}</span>
        {description ? <span className="mt-0.5 block text-[13px] leading-5 text-muted-foreground">{description}</span> : null}
      </span>
      {aside ? <span className="relative shrink-0 text-sm font-medium text-foreground tabular-nums">{aside}</span> : null}
      <span
        aria-hidden="true"
        className={cn(
          "relative mt-0.5 flex size-[18px] shrink-0 items-center justify-center rounded-full border bg-background transition-colors duration-200",
          checked ? "border-primary" : "border-input",
        )}
      >
        <motion.span
          className="size-2.5 rounded-full bg-primary"
          initial={false}
          animate={{ scale: checked ? 1 : 0, opacity: checked ? 1 : 0 }}
          transition={reduceMotion ? { duration: duration.instant } : checked ? spring.bouncy : { duration: duration.quick }}
        />
      </span>
    </RadioGroupPrimitive.Item>
  );
}

Usage

import { RadioCard, RadioCardGroup } from "@/components/ui/radio-card-group/radio-card-group";

export function PlanPicker() {
  return (
    <RadioCardGroup defaultValue="pro" aria-label="Plan" className="sm:grid-cols-3">
      <RadioCard value="starter" title="Starter" aside="$0" />
      <RadioCard value="pro" title="Pro" aside="$24" />
      <RadioCard value="scale" title="Scale" aside="$79" />
    </RadioCardGroup>
  );
}

API reference

RadioCardGroup

Prop	Type	Default	Description
`value`	`string`	–	Controlled selected value.
`defaultValue`	`string`	–	Initially selected value when uncontrolled.
`onValueChange`	`(value: string) => void`	–	Called with the newly selected value.

Also accepts every prop of Radix RadioGroup.Root, including className and disabled.

RadioCard

Prop	Type	Default	Description
`value*`	`string`	–	Value submitted and reported when this card is chosen.
`title*`	`ReactNode`	–	Main label.
`description`	`ReactNode`	–	Supporting text under the title.
`icon`	`ReactNode`	–	Icon shown at the start of the card.
`aside`	`ReactNode`	–	Content at the end of the card, such as a price.

Also accepts every prop of Radix RadioGroup.Item, including className and disabled.

Lay the cards out with className on the group, e.g. sm:grid-cols-3; the shared ring follows any layout.
The gliding ring has an inline 14px radius so Motion can keep its corners round while it moves.

Accessibility

Built on Radix RadioGroup: role="radiogroup" with one tab stop, and arrow keys move between cards and select them.
Each card is a radio whose accessible name is its title and description. Give the group an aria-label or wrap it in a labelled fieldset.
Disabled cards are skipped by the arrow keys.
With a name inside a form, Radix submits the selected value through a hidden input.
With reduced motion enabled, the ring and dot jump to the chosen card without gliding or bouncing.

Installation#

CLI