Group Tone Radio

Forms 1

About

A row-card radio group with semantic tone variants (info, success, warning, danger, muted) that animates the selection dot and supports arrow-key navigation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Group Tone Radio to your project and fits it to your theme.

Code

How Group Tone Radio is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import RadioGroupTone from "@/components/ui/radio-group-tone";

export default function RadioGroupToneDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6 p-6">
      <RadioGroupTone
        tone="info"
        options={[
          { value: "free", label: "Free plan" },
          { value: "pro", label: "Pro plan" },
          { value: "team", label: "Team plan" },
        ]}
        defaultValue="pro"
      />
    </div>
  );
}