ControlsNew
Glass Radio Group
Options where exactly one is chosen, with a dot that pops in and shrinks away.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-radio-groupPreview
Demos ready. Update 0.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-radio-groupWhat this installs5 files, 2 packages
Direct registry declarations
These values belong to @glassyui/glass-radio-group itself in registry.json.
Package dependencies
@radix-ui/react-radio-groupclsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-radio-group.tsx
Complete installed closure
This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.
Package dependencies
@radix-ui/react-radio-groupclsx
Installed files
components/glassyui/glass-radio-group.tsxcomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
Usage
import { GlassRadioGroup, GlassRadioGroupItem } from "@/components/glassyui/glass-radio-group";
export function PlanDemo() {
return (
<GlassRadioGroup aria-label="Plan" defaultValue="pro">
<GlassRadioGroupItem value="starter" label="Starter" />
<GlassRadioGroupItem value="pro" label="Pro" description="For teams shipping weekly." />
</GlassRadioGroup>
);
}Examples
<GlassRadioGroup aria-label="Plan" value={plan} onValueChange={setPlan}>
{PLANS.map((item) => (
<GlassRadioGroupItem key={item.value} value={item.value} label={item.label} />
))}
</GlassRadioGroup>API
GlassRadioGroupRadix radio group. The arrow keys move the choice.
GlassRadioGroupItemOne option, with an optional label and description.
value / onValueChangeControlled choice. Also defaultValue.
labelText beside the button. Clicking it chooses the option.
descriptionA muted line under the label.
Notes
Accessibility
Name the group with aria-label or aria-labelledby. Tab enters the group and the arrow keys move within it.
Accessibility
Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.
Performance
Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.