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.
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:
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
Top comments (0)