Radio

Forms 12

About

A customizable radio group component with smooth animations and flexible layouts

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

Code

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

Usage.tsx

import { RadioGroup, RadioItem } from "@/components/ui/radio";

export default function DemoOne() {
  return(
    <>
      <div className="max-w-sm w-full mx-auto flex items-center justify-center">
        <RadioGroup
          defaultValue="comfortable"
          label="Select your comfort level"
          description="Choose the option that best fits your needs"
        >
          <RadioItem
            value="comfortable"
            label="Comfortable"
            description="A relaxed and easy-going approach"
          />
          <RadioItem
            value="compact"
            label="Compact"
            description="Minimal space with essential features"
          />
          <RadioItem
            value="spacious"
            label="Spacious"
            description="Plenty of room with all amenities"
          />
        </RadioGroup>
      </div>
    </>
  );
}