GuidelinesGuidelinesBuilt on @radix-ui/react-radio-group. The source mixes a theme-token ring (border-primary) with a brand-scale dot (bg-primary-70) on the same control — this bundle unifies both on primary-70.
npx chandra-asri-ui add radio-group<RadioGroup defaultValue="growth">
<div className="flex items-center gap-2">
<RadioGroupItem value="starter" id="rg-starter" />
<Label htmlFor="rg-starter">Starter</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="growth" id="rg-growth" />
<Label htmlFor="rg-growth">Growth</Label>
</div>
</RadioGroup>"use client";
import { cn } from "@/lib/utils";
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import * as React from "react";
/**
* Mirrors the base guideline RadioGroup with two fixes: (1) the source's
* outer ring uses a theme-token border (`border-primary`) while the filled
* dot inside uses the brand scale (`bg-primary-70`) — two different color
* sources on the same component, flagged in the source's own style guide,
* unified here on the brand `primary-70`; (2) the indicator dot is a plain
* filled div instead of a lucide icon with a `fill-*` class, so the accent
* fill always renders regardless of the icon's own default `fill`/`stroke`
* attributes.
*/
export const RadioGroup = React.forwardRef<
React.ComponentRef<typeof RadioGroupPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => (
<RadioGroupPrimitive.Root
ref={ref}
className={cn("grid gap-2", className)}
{...props}
/>
));
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
export const RadioGroupItem = React.forwardRef<
React.ComponentRef<typeof RadioGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => (
<RadioGroupPrimitive.Item
ref={ref}
className={cn(
"border-primary-70 text-primary-70 aspect-square h-4 w-4 rounded-full border shadow",
"focus-visible:ring-primary-30 focus-visible:ring-1 focus-visible:outline-none",
"disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
>
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
<div className="bg-accent h-2 w-2 rounded-full" />
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
));
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;