Components
Loading preview...
Here is Radio Group component
npx shadcn@latest add https://21st.dev/r/anubra266/radio-group"use client";
import { RadioGroup } from "@ark-ui/react/radio-group";
export default function WithDescriptions() {
const options = [
{
value: "email",
label: "Email notifications",
description: "Receive updates and important information via email only.",
},
{
value: "push",
label: "Push notifications",
description: "Get instant alerts on your device with push notifications.",
},
];
return (
<RadioGroup.Root className="flex flex-col space-y-4" defaultValue="push">
{options.map((option) => (
<RadioGroup.Item
key={option.value}
value={option.value}
className="flex items-start gap-3 cursor-pointer"
>
<RadioGroup.ItemControl className="group size-4 bg-white border-2 border-gray-300 rounded-full data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 data-hover:border-gray-400 dark:bg-gray-900 dark:border-gray-600 dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-blue-500 dark:data-hover:border-gray-400 data-focus:ring-2 data-focus:ring-blue-500/50 transition-all duration-200 flex items-center justify-center text-white mt-0.5">
<svg
width="6"
height="6"
viewBox="0 0 6 6"
fill="currentcolor"
xmlns="http://www.w3.org/2000/svg"
className="opacity-0 group-data-[state=checked]:opacity-100 transition-opacity"
>
<circle cx="3" cy="3" r="3"></circle>
</svg>
</RadioGroup.ItemControl>
<div className="flex-1">
<RadioGroup.ItemText className="text-sm font-medium text-gray-900 dark:text-gray-100 leading-tight">
{option.label}
</RadioGroup.ItemText>
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
{option.description}
</p>
</div>
<RadioGroup.ItemHiddenInput />
</RadioGroup.Item>
))}
</RadioGroup.Root>
);
}