shadcn/ui
Beautifully designed components built with Radix UI and Tailwind CSS. A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code. Use this to build your own component library.Installation
Get started by installing shadcn/ui in your Next.js, Vite, or other React project
Components
Browse the collection of 50+ beautifully designed components
CLI
Use the CLI to quickly add components to your project
Themes
Customize your design system with themes and color palettes
Overview
shadcn/ui is not a component library. It’s a collection of re-usable components that you can copy and paste into your apps. What do you mean by not a component library? The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled. Start with some sensible defaults, then customize the components to your needs. One of the drawbacks of packaging the components in an npm package is that the style is coupled to the implementation. The design of your components should be separate from their implementation.Key Features
Accessible
Built on top of Radix UI primitives for accessibility out of the box
Customizable
Components are styled with Tailwind CSS - customize to match your design
Open Source
Free to use for personal and commercial projects. MIT licensed
TypeScript
Written in TypeScript with full type safety
Philosophy
Use this as a reference to build your own component libraries.- Copy and paste. You own the code. Modify it to fit your needs.
- Accessible. Built with accessibility in mind using Radix UI.
- Customizable. Tailwind CSS for styling. Configure your design system.
- Open Source. Free to use. MIT licensed.
FAQ
Why copy/paste and not packaged as a dependency?
Why copy/paste and not packaged as a dependency?
The idea behind this is to give you ownership and control over the code. You can modify the components to fit your needs without being tied to a package version.One of the drawbacks of packaging components in an npm package is that the style is coupled to the implementation. The design of your components should be separate from their implementation.
Which frameworks are supported?
Which frameworks are supported?
You can use components with any React framework. We provide installation guides for:
- Next.js (App Router and Pages Router)
- Vite
- Remix
- Astro
- Laravel
- Gatsby
Can I use this in my project?
Can I use this in my project?
Yes! The code is open source and free to use for personal and commercial projects. MIT licensed.
Community
Join our community to get help, share your work, and contribute to the project.
Credits
- Built by shadcn
- Radix UI for the primitives
- Vercel for hosting