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.

Toggle Component - shadcn/ui Examples

About the shadcn/ui Toggle Component

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

Toggle Component — Frequently Asked Questions

How is shadcn Toggle different from Checkbox?

Toggle is a button-like control for toolbar actions (bold, italic, favorite). Checkbox represents a form field boolean. Use Toggle for visual mode switches, Checkbox for form inputs.

How do I use shadcn Toggle for text formatting like Bold?

Use `pressed` state: `<Toggle pressed={isBold} onPressedChange={setIsBold} aria-label="Bold"><Bold /></Toggle>`. Apply formatting when pressed is true.

How do I group Toggles for exclusive selection?

Use `<ToggleGroup type="single">` instead of individual Toggles. It manages exclusive selection automatically with ARIA and keyboard navigation.