Seven Reasons Why I Love Shadcn UI

eyalcohen4

Eyal Cohen

Posted on November 23, 2023

Seven Reasons Why I Love Shadcn UI

Shadcn UI is a pretty new React component library by shadcn.

It’s built on top of Tailwind and Radix-UI, and I really enjoy using it lately.

Here are seven reasons why:

1. It’s Gorgeous

First off, it’s beautiful.

Shadcn UI has a modern, minimal design out of the box. It’s smooth.

The interactions and animations are already built for dropdowns, alerts, and dialogs.

Shadcn UI Dialog Component

2. Modular & Easy Installation and a CLI

There’s no scary monster dependency of 2mb to install and ship to users.

Every component can be installed separately, and Shadcn even created a CLI. Adding a component is as simple as:

npx shadcn-ui add card.

You can also just copy, paste, and you’re all set.

3. Full Control

This leads to the following reason: the components aren’t just ready to use but also ready to tweak.

Some libraries lock you into their way of doing things, but in Shadcn UI, you get complete control, and customization is simple.

4. It’s more of a building block than a component library

Shadcn UI differs from other component libraries because it resembles a LEGO set.

Even the docs say: “Use this as a reference to build your own component libraries.”.

And at the end, almost every company wants its own component library instead of committing to a specific style, which is usually hard to extend or customize.

These two different designs are made with Shadcn UI components:

shadcn-ui task example

shadcn-ui music example

5. Accessibility

Inclusivity is built in.

The components are made to be accessible since the underline library is radix-ui, which is an Unstyled, accessible component library for React.

Your apps will be user-friendly to all. And in this day and age, that’s not just nice — it’s essential.

6. Docs

The docs are perfect. Clear, packed with examples, they make it a breeze to understand how to use and customize components.

7. Dark/Light Theme

What’s the most critical thing for an app to be successful? That’s right — a dark theme.

Shadcn UI has a dark and light theme out of the box. And you can easily customize it to your needs.

— -

An example of an app I created lately with Shadcn UI is a getting things done task management aapp; you can view it here:

https://github.com/eyalcohen4/GTD

And don’t just take my word for it. I really recommend you give it a try in your next project.

Shadcn has even made a template you can use as a starter, or you can follow the instructions here to add it to an existing project

Happy coding!

originally published at coheneyal.com

💖 💪 🙅 🚩
eyalcohen4
Eyal Cohen

Posted on November 23, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related