Components — 56 Accessible React UI Primitives

Single-choice radio selection group built on Radix RadioGroup primitive supporting radio buttons and selectable card grid layouts.

// Radix — @radix-ui/react-radio-group
import { Radio, RadioGroup } from "@shavin/ui";

Default Radio Group

FreeProTeamEnterprise (disabled)

Component Source

const [plan, setPlan] = useState("free");

<RadioGroup value={plan} onValueChange={setPlan} className="space-y-2">
  <Radio value="free" label="Free" />
  <Radio value="pro" label="Pro" />
  <Radio value="team" label="Team" />
  <Radio value="enterprise" label="Enterprise (disabled)" disabled />
</RadioGroup>

Radius control — default "inherit" (follows theme radius), custom overrides per item or group

Round (full)

Square (none)

Theme Inherit

Component Source

<RadioGroup value={plan} onValueChange={setPlan} className="space-y-2">
  <Radio value="free" label="Round (full)" radius="full" />
  <Radio value="pro" label="Square (none)" radius="none" />
  <Radio value="team" label="Theme Inherit" radius="inherit" />
</RadioGroup>

Cards Variant (variant='cards')

SmallCompact size

MediumStandard size

LargeSpacious size

Extra LargeDisabled option

Component Source

const [size, setSize] = useState("md");

<RadioGroup variant="cards" value={size} onValueChange={setSize} className="w-full">
  <Radio value="sm" label="Small" description="Compact size" />
  <Radio value="md" label="Medium" description="Standard size" />
  <Radio value="lg" label="Large" description="Spacious size" />
  <Radio value="xl" label="Extra Large" description="Disabled option" disabled />
</RadioGroup>

Props

RadioGroup Props

Prop	Type	Default	Description
variant	"default" \| "cards"	radio	Visual variant: default radio buttons or cards layout. Default "default".
radius	RadiusPreset	inherit	Radius style for radio items or card containers. Default "inherit".

Radio Props

Prop	Type	Default	Description
value*	string	—	Option value string.
label	string	—	Primary option label text.
description	string	—	Optional secondary description text for card layout.
disabled	boolean	—	Disabled state.
radius	RadiusPreset	—	Radius override for this specific item.
variant	"default" \| "cards"	—	Variant override for this specific item.
className	string	—	Custom wrapper class name.
children	ReactNode	—	Custom children element to render inside card or label.

* required