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.

Sonner (Toast) Component - shadcn/ui Examples

About the shadcn/ui Sonner (Toast) Component

The Sonner (Toast) 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 sonner` and copy it directly into your project.

Sonner (Toast) Component — Frequently Asked Questions

How do I show a success toast with shadcn Sonner?

Import `toast` from 'sonner' and call `toast.success('Profile updated!')`. Make sure `<Toaster>` is in your root layout.

How do I show a toast for an async operation?

Use `toast.promise(asyncFn, { loading: 'Saving...', success: 'Saved!', error: 'Failed' })`. Sonner handles the state transitions automatically.

How do I add an action button inside a Sonner toast?

Pass `action` option: `toast('Event created', { action: { label: 'Undo', onClick: handleUndo } })`. The button appears inside the toast notification.