Components
Loading preview...
This RadioCard component is a modern, card-based alternative to traditional radio buttons. Instead of small circular inputs, each option is presented as a visually distinct card containing an icon, title, and optional description. When a card is selected, it highlights with a border and background color, and a glowing green dot appears in the top-right corner to clearly indicate the active choice. The design focuses on accessibility and user experience with smooth hover and focus states, responsive layout, and keyboard support (inherited from Radix). This makes it ideal for use cases such as theme selectors, preference panels, or plan pickers, where a more engaging and intuitive selection experience is desired compared to standard radio groups.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/radio-group-card"use client";
import { RadioGroup, RadioCard } from "@/components/ui/radio-group-card";
import { Laptop, SunMedium, Moon } from "lucide-react";
function DemoPage() {
return (
<div className="max-w-md space-y-6">
<p className="text-sm text-muted-foreground">
Select the theme that best matches your environment.
</p>
<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>
<div className="mt-4 text-xs text-center text-muted-foreground">
Minimal design • made by{" "}
<a href="https://www.ruixen.com" target="_blank" className="underline">
ruixen.com
</a>
</div>
</div>
);
}
export default DemoPage;