antd VS shadcn/ui

6. Ant Design

GitHub: https://github.com/ant-design/ant-design

10. Ant Design A comprehensive design system with a wide variety of ready-to-use components, patterns, and themes optimized for enterprise-level applications. Ant Design:

I also decided to choose a component library antd, so I won't have to reinvent the wheel and can prototype at a faster phase.

Ant Design Ant Design is a comprehensive design system and React UI library for enterprise applications. It provides a wide range of high-quality components and an extensive design language.

Let's start by setting up our Next.js project with all the necessary dependencies. We'll use TypeScript for type safety, Tailwind CSS for styling, Ant Design for UI components, Zod for form validation, and Resend for email functionality.

Ant Design is a comprehensive React UI library that offers a wealth of well-designed, high-quality components. It stands out for its consistency, flexibility, and ease of use, making it an ideal choice for modern web applications. By adopting Ant Design, we aimed to:

Ant Design

What's particularly wrong with it? Looks like pretty standard React, with some custom hooks imported, and clearly defined props.

If you start at the bottom, with the actual component (https://github.com/ant-design/ant-design/blob/master/compone...), the logic is much clearer. Most of the other consts are just definitions that you pass to the component (see documentation at https://ant.design/components/table#table).

And for the long list of imports and such, any modern IDE can parse those for you and easily jump to the source or the type defs.

If you're complaining about how this looks vs traditional OOP code, etc., that's just a stylistic choice Meta made for React codebases a few years back. It actually does make components pretty easy to maintain over the long term because all the core logic is just in one long, flat file. Lots of vertical scrolling, but predictable outcomes and easily refactored chunks. But third parties typically just have to mimic that style. That's not on Ant, that's just how JS code is currently in fashion...

I was using a Chinese website recently based on the “ant design” [^1] library / philosophy. It’s a really UI dense way of doing things and I really enjoyed having everything there without having to go hunting into menus.

[1]: https://ant.design/

In case anyone finds this who is also interested: I just stumbled upon an implementation of shadcn/ui components with css modules that looks pretty solid: https://github.com/qwalker8408/shadcn-css/tree/main

Hopefully something like this will be made official - at least there is some discussion going on in the shadcn/ui repo: https://github.com/shadcn-ui/ui/discussions/2832

shadcn/ui

For this project, I used PureScript + React + Tailwind css + shadcn/ui components. I assume you’ve heard of the first two (if not, see PureScript overview). The other two are blessings for the copy-paste-driven development.

The frontend of Zentrox is written using React. Of course I did not write this frontend without any frameworks. I use Next.JS by Vercel as a framework. Zentrox also uses a UI library called shadcn. Shadcn is an amazing library. It made devloping frontend a lot easier when you do not have to build everything from the ground up. I'd also like to give some credit to Radix UI, as this is what Shadcn uses for its components. :-)

I used Tailwind CSS for the styling because it's fast and easy to use, after a second thought I decided to use shadcn/ui so I did not have to build the components from scratch.

We started migrating some of our internal tools to https://ui.shadcn.com/ . We did not want to reinvent the wheel because it would take too effort (and we did try a couple times and failed).

If you're familiar with shadcn/ui (and if you're not, you should check it out!), you'll get what I'm going for here. asterisk/ui also follows the same core idea of providing open source, beautifully designed components that you can copy and paste into your apps, only in this case, the components are animations instead of styled primitives. It's all about making your life easier and your projects prettier.

Today, let's take a deeper look at two of the top contenders: Radix UI and ShadCN. Both these libraries have something different to bring to the table, and by the end of this post, you'll have a clearer idea of which might best be suited for your next project.

Living in the web development world, it may just feel like digging for treasure until you find your tools. If you're just starting now, well, you're in luck because Shadcn is packed full of awesome components that can make life so much easier.

Shadcn/ui