DEV Community

Musab
Musab

Posted on

2

Shadcn UI pros and cons

Shadcn UI provides components to copy and paste into your app. It's built with Radix UI and Tailwind CSS.

It's been a couple of weeks using Shadcn UI. So, I would like to share my thoughts on it. Like other frameworks, it has pros and cons. Some of them are mentioned below.

Pros

  • Copy and paste components directly to your app.
  • Built with Radix UI and Tailwind CSS.
  • Good design.
  • Light/Dark mode out of the box.
  • Automatic CLI installation.
  • Well integrated with Next.js 13 (app directory).
  • Full accessibility out of the box.
  • Full type safety with Zod.
  • It's open source.

and more

Cons

  • Issues with intellisense. It shows autocomplete from Radix UI too. Intellisense issue
  • Difficulty in changing colors. It's very confusing to change colors on it. How the colors look like

Some feature requests I would like to make 🥳

Ability to change naming convention

Add an option (while installing) for changing the file convention like PascalCase, camelCase, or spinal-case. As people like me usually use PascalCase for components.

Ability to change colors with CLI

It can handle automatic color generation. (e.g. https://www.tailwindshades.com)

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await