Components
Loading preview...
Here is Color picker radio group component
npx shadcn@latest add https://21st.dev/r/float_ui/color-picker-radio-group"use client";
type Plan = {
name: string;
description: string;
};
const radios: Plan[] = [
{ name: "Hobby plan", description: "For personal or non-commercial projects." },
{ name: "Pro plan", description: "For team collaboration with advanced features." },
{ name: "Enterprise plan", description: "For teams with security, and performance needs." },
];
export default function PlanRadioCards() {
return (
<div className="max-w-md mx-auto px-4">
<h2 className="text-gray-800 font-medium">Find a plan to power your projects</h2>
<ul className="mt-6 space-y-3">
{radios.map((item, idx) => {
const id = `plan-${idx}`; // safe, unique id
return (
<li key={id}>
<label htmlFor={id} className="block relative">
<input
id={id}
type="radio"
name="plan"
defaultChecked={idx === 1}
className="sr-only peer"
aria-label={item.name}
/>
<div className="w-full p-5 cursor-pointer rounded-lg border bg-white shadow-sm ring-indigo-600 peer-checked:ring-2 duration-200">
<div className="pl-7">
<h3 className="leading-none text-gray-800 font-medium">{item.name}</h3>
<p className="mt-1 text-sm text-gray-600">{item.description}</p>
</div>
</div>
{/* Custom radio dot */}
<span className="block absolute top-5 left-5 border peer-checked:border-[5px] peer-checked:border-indigo-600 w-4 h-4 rounded-full" />
</label>
</li>
);
})}
</ul>
</div>
);
}