Shadcn/UI is a component library built on Tailwind CSS and Radix UI primitives. Unlike traditional libraries, you copy components directly into your project, giving you full control over styling and behavior.

How do I install Shadcn/UI components?

Use the shadcn CLI to add components: npx shadcn@latest add [component-name]. This copies the component files directly into your project.

Can I customize Shadcn/UI components?

Yes, since components are copied into your project, you have complete control. Modify styling, add props, or change behavior as needed.

Is Shadcn/UI free to use?

Yes, Shadcn/UI is completely free and open-source. Components are MIT licensed and you can use them in any project, including commercial ones.

Radio Group Component - shadcn/ui Examples

About the shadcn/ui Radio Group Component

The Radio Group component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add radio-group` and copy it directly into your project.

Radio Group Component — Frequently Asked Questions

How do I use shadcn Radio Group with React Hook Form?

Use `<Controller name="option" control={control} render={({ field }) => <RadioGroup onValueChange={field.onChange} defaultValue={field.value}>`. Access value with `field.value`.

How do I style radio cards instead of radio circles?

Use the Field component's choice-card variant, or wrap each `<RadioGroupItem>` in a styled Card with `cursor-pointer` and use `data-[state=checked]` to style the selected state.

How do I layout Radio Group items horizontally?

Add `className="flex space-x-4"` to `<RadioGroup>`. Wrap each item in a flex row with the label alongside the radio button.