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.

Button Component - shadcn/ui Examples

About the shadcn/ui Button Component

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

Button Component — Frequently Asked Questions

How do I add a loading state to a shadcn Button?

Add a `disabled` prop and an animated spinner icon: `<Button disabled><Loader2 className="animate-spin" />Loading...</Button>`. The loading variant example shows the full pattern.

How do I use an icon-only Button in shadcn/ui?

Use the `Icon` variant example: `<Button variant="ghost" size="icon"><Icon /></Button>`. Set `size="icon"` to get a square button.

Can I use shadcn Button as a Link?

Yes, use the `asChild` prop with Next.js Link: `<Button asChild><Link href="/page">Go</Link></Button>`. This renders a link with button styles.