Problems with Ant Design and Why shadcn/ui (based on radix‑ui) Is a Better Choice

This article discusses three major issues developers encounter when using Ant Design (antd): the difficulty of resetting styles, the cumbersome process of fixing bugs through GitHub issues and pull requests, and the heavy historical baggage that limits core component changes.

1. Style Resetting Difficulty

Many antd styles are implemented via pseudo‑elements, making overrides ineffective unless the pseudo‑elements themselves are targeted. Components such as Modal , Popover , and other Portal based elements are mounted on body by default, requiring the use of getPopupContainer , style , or className props, or global CSS overrides to customize their appearance.

Additionally, some built‑in components like Icon are hard to modify, and adding or adjusting animations can be challenging.

2. Bug Fixing Is Hard

Although the antd community is active, when a bug is found developers must open a GitHub issue or submit a PR and wait for maintainers to review and merge it. This process can be time‑consuming, and there is no guarantee that the PR will be accepted if it does not align with the maintainers' design philosophy.

3. Heavy Historical Burden

Ant Design, as the largest Chinese React component library, carries legacy implementations for components like Form , Table , and Carousel . Newer, high‑quality libraries (e.g., react‑hooks‑form , @tanstack/react-table , framer‑motion ) are not adopted because antd already provides similar components, and its maintainers are reluctant to modify core logic that has been fixed for years.

What Should We Choose Instead?

The article recommends headless UI libraries, which focus solely on component state management without imposing any visual style. Examples include radix‑ui , chakra‑ui , and headless‑ui .

Why shadcn/ui (based on radix‑ui) Is Preferred

shadcn/ui is not a traditional npm package; it is a collection of React components built on top of radix‑ui primitives. Developers can copy component source code directly into their projects or use the official CLI tool.

npx shadcn-ui add [component]

For instance, to add an alert dialog:

npx shadcn-ui add alert-dialog

The library works with various toolchains (Next.js, Vite, Webpack, CRA) and styling solutions (Tailwind CSS, Sass, Less, styled‑components), giving full control over component logic and appearance.

Unified Styling Guidelines

shadcn/ui provides a minimalistic, unified style guide that mimics the out‑of‑the‑box experience of antd while remaining highly customizable, addressing the difficulty of maintaining a consistent style system in small teams or solo projects.

This is the shadcn/ui Figma UI Kit .

Conclusion

shadcn/ui effectively resolves the style, bug‑fixing, and legacy issues associated with antd, offering a lightweight, flexible alternative that has gained strong community endorsement.