Guide · Open source
How to use shadcn/ui: clone, explore and customize components
Updated · written with AI from the project's own documentation and checked against our catalogue data
shadcn/ui is a set of UI components, such as buttons and form pieces, that you bring into your own project as source code instead of installing as a locked package. This guide explains what it is, how to get the repository, and how to decide whether it fits your React or Next.js work. By the end you will know where to start and what you can change.
shadcn/uishadcn-ui/ui · ★ 127k · MIT Install options & downloads Quick start
- 1Clone the repository. Run git clone https://github.com/shadcn-ui/ui in your terminal to get the source.
- 2Open the documentation. Visit https://ui.shadcn.com/docs to see how components are set up and used.
- 3Confirm your stack. Check that your project is React or Next.js and that you are comfortable with Tailwind CSS, the likely styling base.
- 4Copy or adapt a component. Take the component code you need into your project and edit it to match your design.
- 5Check the licence. Review the MIT licence in LICENSE.md before you ship code that uses it.
What shadcn/ui is and how it differs from a package
The README describes shadcn/ui as a set of components you can customize, extend and build on. The project's own framing is that you start here and then make it your own, so the code belongs to your project once you use it.
This is the key difference from a typical component library. Instead of importing a finished package you cannot edit, you work with the component code directly, which means you can change it to match your design.
- Components are source code you own and can edit.
- Licensed under the MIT license, per the repository's LICENSE.md.
- The README frames it as a base for building your own component library.
Get the source code with git clone
The README's install instruction is to clone the repository. Run the command below in the terminal where you want the project folder to appear.
The source does not list other prerequisites or a package install step, so check the documentation at https://ui.shadcn.com/docs for how to add components to your own app.
- Open a terminal and move to the folder where you keep projects.
- Run the clone command, then open the new folder in your editor.
git clone https://github.com/shadcn-ui/uiDecide whether it fits your project
shadcn/ui suits developers building React or Next.js interfaces who want full control over component code. The topics point to a React-focused stack and Tailwind CSS as the styling base, so those are the projects it is aimed at.
It is not a finished app or website template. It is a set of building blocks, and it assumes you can read and adapt code. Beginners without basic web development knowledge will find it hard going.
- Good fit: React or Next.js teams wanting a design system they can change freely.
- Good fit: designers working with developers who need a custom look.
- Poor fit: anyone wanting a ready-made site or app template.
- Poor fit: projects not using React.
Read the documentation before you customize
The README points to the full documentation at https://ui.shadcn.com/docs. Use it to learn how components are added and structured before you edit anything.
Contributions are handled through the contributing guide at /CONTRIBUTING.md, which is the place to read if you want to propose changes to the project itself.
- Read the docs at ui.shadcn.com/docs.
- Check CONTRIBUTING.md if you plan to send changes upstream.
Compare with similar projects
Comparable projects named in the analysis are Radix UI, Headless UI, Material UI and Chakra UI. Choose based on whether you want owned source code (shadcn/ui's approach) or a maintained library you import and style through its API.
This page does not benchmark these options, so test the one you are considering against your own needs.
- Radix UI and Headless UI are often used as unstyled primitives.
- Material UI and Chakra UI are full component libraries you import.
What people use it for
- Building a design system for a React product that the team can restyle over time.
- Creating a Next.js interface with buttons and form components tuned to a custom brand.
- Giving designers and developers a shared set of editable components.
- Starting a private component library the team owns outright.
Frequently asked questions
Is shadcn/ui free to use?
The repository is licensed under the MIT license, which is stated in the README and LICENSE.md. Check that file for the full terms before using it in a commercial project.
How do I install shadcn/ui?
The README's install instruction is to clone the repository with git clone https://github.com/shadcn-ui/ui. For how to add components to an app, use the documentation at https://ui.shadcn.com/docs.
Does shadcn/ui require React?
The topics point to a React-focused stack, and the project targets React and Next.js interfaces. If you do not use React, it is not a good fit.
Is shadcn/ui a component library I import from npm?
It is designed so components are added to your project as source code you can edit, rather than installed as a locked package. The README describes it as a starting point for your own library.
Do I need Tailwind CSS to use shadcn/ui?
The analysis suggests Tailwind CSS is the styling base, based on the project's topics. Confirm the styling setup in the documentation at ui.shadcn.com/docs.
How does shadcn/ui compare to Radix UI or Material UI?
Radix UI, Headless UI, Material UI and Chakra UI are the comparable projects named in the analysis. shadcn/ui gives you owned source code, while Material UI and Chakra UI are maintained libraries you import; this guide does not benchmark them.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
shadcn/ui suits React or Next.js developers and teams who want components they can read, change and own under an MIT licence. It is not a finished template, and beginners or non-React projects should choose a more complete or different option.
Install options & downloads