Radio Group Cards

cards x select

Radio group styled as selectable cards. From Bundui.

radiogroupcardsbundui

Code

radio-group.tsx

"use client";
import { useState } from "react";

export function RadioCards({ options, defaultValue }: { options: string[]; defaultValue?: string }) {
  const [selected, setSelected] = useState(defaultValue ?? options[0]);
  return (
    <div role="radiogroup" className="flex gap-2">
      {options.map((o) => (
        <button key={o} role="radio" aria-checked={selected === o} onClick={() => setSelected(o)}
          className={`rounded-lg border px-4 py-3 text-sm transition-colors ${
            selected === o ? "border-brand bg-brand/10 text-foreground" : "border-border text-muted-foreground hover:border-muted-foreground"
          }`}>
          {o}
        </button>
      ))}
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Radio Group Cards component and wire it to my accent.”