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.

Switch Component - shadcn/ui Examples

About the shadcn/ui Switch Component

The Switch 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 switch` and copy it directly into your project.

Switch Component — Frequently Asked Questions

How do I use shadcn Switch with React Hook Form?

Use `<Controller>` or `<FormField>`: set `checked={field.value}` and `onCheckedChange={field.onChange}` on `<Switch>`. The Form example demonstrates this pattern.

How do I add a label to a shadcn Switch?

Use `<Label htmlFor="switch-id">Setting</Label><Switch id="switch-id">`. The `htmlFor`/`id` pair associates the label so clicking it toggles the switch.

How do I make a group of switches exclusive (only one active)?

Use a single `useState` tracking the active switch id. Each `<Switch checked={active === id} onCheckedChange={() => setActive(id)}>` creates radio-like behavior.