Shadcn/ui Review: How to Install, When, and How to Use It?

What is shadcn ui

Not a Traditional Library

The most significant distinction of shadcn/ui is that it isn't a traditional all-in-one library. Instead of installing the entire library, you copy individual components into your projects.

This approach allows full customization and removes unnecessary dependencies and elements you don't need.

Complete Control

Since you are copying a raw code, you have full control over the styles and functionality. Modifying or extending components' functionality to suit specific needs doesn't come with traditional issues that appear while using traditional libraries.

Tailored for React & Next.js

shadcn/ui is built for use with React, Next.js, Astro, Remix, and Gatsby. It also supports server-side rendering (SSR) and static site generation (SSG).

Component Quality

The collection provides a wide range of well-designed components. From forms and buttons to more complex models and dropdowns.

Each component is built with best design practices in mind, including state management and accessibility attributes.

How to use shadcn/ui

Here's an example of how to use shadcn with Next.js.

1. Create project

Run the init command to create a new Next.js project or to set an existing one:

npx shadcn@latest init

You can use the -d flag for defaults i.e new-york, zinc and yes for the css variables.

npx shadcn@latest init -d

2. Configure components.json

You will be asked a few questions to configure components.json:

Which style would you like to use? › New YorkWhich color would you like to use as base color? › ZincDo you want to use CSS variables for colors? › no / yes

3. Find the components you need

Now you can add components to your project. Go to the shadcn component documentation to find the components you need.

Adding a component is simple, just use the add command, for example, button component:

npx shadcn@latest add button

Another way to use shadcn ui components is to use Vercel's v0. It's generative AI that uses shadcn components to create web pages.

Advantages of shadcn/ui

1. Lightweight

By copying only the components you need, your project stays lightweight and free of unnecessary bloating of your code base.

2. Customizable

shadcn/ui gives you full control over every component. This freedom is especially valuable for projects with specific branding or design requirements.

3. Open Source and Free

shadcn/ui is completely open-source. Developers can contribute to the project or adapt it as needed for their unique use cases. It is free to use without any licensing restrictions, making it a great tool for both professional and personal projects.

Shadcn ui use cases

1. Highly Customized UIs

If you are building a project that requires detailed control over the look and feel of your interface, shadcn/ui allows you to tweak components to your exact specifications.

2. Next.js Projects

Developers working on Next.js apps will find shadcn/ui a great match, especially with its compatibility with SSR and Tailwind CSS.

3. Design System Prototyping

For teams building their own design systems, shadcn/ui offers a great starting point. The flexibility of customizing components makes it easy to prototype and refine a set of reusable components.

Shadcn ui Figma kit

There's a great UI Kit for Figma made by Pietro Schirano. It contains all components with customizable properties, typography, etc. Copy it here.

Conclusion

shadcn/ui is a great choice for devs that look for lightweight and ready-to-use front-end components. While it's not a UI library in a traditional sense, it has all the components you might need for a typical web project.

Instead of confusing mumbo-jumbo to adjust average UI libraries, you get a full source code of each component that you can stylize and modify to your needs.

For more information, visit shadcn/ui on GitHub​.