Luan Phung
Published on

Why I Moved from Ant Design to shadcn/ui: A Developer's Journey

Authors
  • avatar
    Name
    Luan Phung
    Twitter

As a developer, choosing the right UI library is crucial. For years, I was a devoted Ant Design user - it was my go-to solution for building React applications. However, as the web development landscape evolved, I found myself gravitating towards shadcn/ui. In this post, I'll share why I made this transition and how it has transformed my development workflow.

The Ant Design Era

Let's start with some context. Ant Design (antd) is an excellent UI library with a rich history. It offers:

  • A comprehensive component library
  • Enterprise-ready solutions
  • Strong TypeScript support
  • A mature ecosystem

I built numerous projects with antd, and it served me well. The components were reliable, the documentation was thorough, and the community was supportive. So, why change?

The Shift to shadcn/ui

1. Component Ownership

The first thing that drew me to shadcn/ui was its unique approach to components. Unlike antd, where you import pre-built components, shadcn/ui provides you with the component source code directly. This means:

  • Complete control over your components
  • No dependency on external package versions
  • Freedom to modify and customize without workarounds
  • Better understanding of the underlying implementation

2. Tailwind CSS Integration

While antd uses Less and CSS-in-JS, shadcn/ui is built on top of Tailwind CSS. This brings several advantages:

  • Smaller bundle sizes
  • More intuitive styling customization
  • Better performance
  • Consistent design system integration

3. Modern Developer Experience

shadcn/ui feels more aligned with modern web development practices:

  • Built with React Server Components in mind
  • Excellent TypeScript support
  • Radix UI primitives for better accessibility
  • Simple installation process with CLI

4. Design Freedom

One of the biggest challenges with antd was breaking free from its distinct "Ant Design" look. With shadcn/ui:

  • Components are unstyled by default
  • Easy to implement your own design system
  • No need to fight against existing styles
  • More flexible theming options

Why You Might Consider the Switch

Consider moving to shadcn/ui if you:

  • Want more control over your component implementation
  • Are building a custom design system
  • Value simplicity and modern development practices
  • Need better performance and smaller bundle sizes
  • Prefer Tailwind CSS for styling

What I Miss from Ant Design

To be fair, there are some things I miss:

  • Some complex components like Table with built-in sorting/filtering
  • The mature ecosystem of add-ons

However, the benefits of shadcn/ui outweigh these limitations for my use cases.

Conclusion

Moving from Ant Design to shadcn/ui was a strategic decision that improved my development workflow and the quality of my projects. While antd remains a solid choice for enterprise applications, shadcn/ui offers a modern, flexible approach that aligns better with current web development trends.

The transition gave me more control over my components, better performance, and a more enjoyable development experience. If you're considering making the switch, I encourage you to try shadcn/ui on a small project first. You might find, as I did, that it's a refreshing change that makes UI development more enjoyable and maintainable.

Remember, there's no one-size-fits-all solution in web development. Choose the tool that best fits your project's needs and your team's workflow. For me, that choice is shadcn/ui.