Radio Group Card

Select the theme that best matches your environment.

Minimal design • made by ruixen.com

Installation

Usage

import { RadioGroup, RadioCard } from "@/components/ruixen/radio-group-card";
import { Laptop, SunMedium, Moon } from "lucide-react";
 
export default function App() {
  return (
    <RadioGroup defaultValue="system">
      <RadioCard
        value="light"
        title="Light Mode"
        description="Bright and clean layout with light backgrounds."
        icon={<SunMedium size={20} />}
      />
      <RadioCard
        value="dark"
        title="Dark Mode"
        description="Dimmed layout that's easy on the eyes at night."
        icon={<Moon size={20} />}
      />
      <RadioCard
        value="system"
        title="System"
        description="Automatically adapts to your device's settings."
        icon={<Laptop size={20} />}
      />
    </RadioGroup>
  );
}

Props

RadioGroup Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`defaultValue`	`string`	-	Default selected value
`value`	`string`	-	Controlled selected value
`onValueChange`	`(value: string) => void`	-	Callback when value changes

RadioCard Props

Prop	Type	Default	Description
`value`	`string`	-	Unique value for this option
`title`	`string`	-	Card title text
`description`	`string`	-	Optional description text
`icon`	`React.ReactNode`	-	Optional icon element
`className`	`string`	-	Additional CSS classes

Features

Card Layout: Rich, visual radio button alternatives
Icon Support: Add icons to enhance visual communication
Animated Indicator: Glowing green dot with ping animation
Hover Effects: Subtle shadow and interaction feedback
Responsive Grid: Automatically adapts to screen size
Accessibility: Full keyboard and screen reader support

Selection Indicator

Each selected card shows an animated indicator in the top-right corner:

Ping Animation: Expanding circle effect
Glowing Effect: Green dot with shadow
Visual Feedback: Clear selection state

Use Cases

Settings Panels: Theme selection, preferences
Plan Selection: Pricing tiers, subscription options
Configuration: Setup wizards, option selection
Onboarding: Feature selection, user preferences