antd VS rsuite

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/

Now open your browser at http://localhost:3000 (in your case address may be different) and you will see an example React application. Let's start hack it. First we will add a navigation bar to our application. We will use React Suite library.

Official Website: https://rsuitejs.com/

React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework. (Source: React Suite GitHub)

As of August 2023, React Suite has amassed more than 7K GitHub stars and more than 60K weekly downloads on NPM.

- React Suite looks very nice and clean and the documentation it's pretty straight forward. Has a ton of components built in. The support is ok and the main developer it's pretty responsive on github or on library chat. The main disadvantage is that the library focuses on desktop browsers and not on mobile browsers and uses less for customization.

This example will use React Suite pack of UI components.

website: React Suit

React Suite

React suit is an example of such a narrowly focused component library for enterprise system products.

I'm just starting out developing with Gatsby (or doing frontend in general) and I wanted to add a Navigation bar to my website using React Suite. However, when importing the corresponding stylesheet: