I've worked as a freelancer on a couple of projects that used Ant Design, and personally I hated it.
In one case I was working on a real estate platform, so I had to build a listing search page (similar to Zillow). This means you're rendering lots of little dots on the map, and on hover, each one will open a popover with the listing details.
Using Ant Design brought this page to a standstill - massive performance issues, we're talking >1 second between frames. Turns out, it was rendering a unique portal element for every dot on the page, regardless of whether it was open or not.
I tried hacking it a bit but eventually gave up, and just wrote my own portal component that simply replaced the portal content with whatever you hovered over. After that we were back to 60fps.
Yeah I should have added that I'm not necessarily singling Ant Design out on this one, because I suspect several frameworks probably make similar mistakes.
It's more general to spawn a portal per component because then you can show multiple popovers at a time, like popovers that are always visible or only go away if you click "Close". So it makes sense to start there for the naive solution.
Yeah I suspect it was probably for this reason, but to answer the parent comment, yes it was required in the sense that it's simply how the Ant Design popover component works (or at least that's how it worked in 2021 which is when I did this).
I was on a different timezone on holiday, and I got woken up with some panic/anger calls direct from the CEO that we had been hacked. It took several hours of deep-diving, calling up security, backend, frontend engineers until we realized this behavior was due to the UI library.
The mind boggles, how someone thought this was a good idea.
Back in 2018, I worked on projects where we used Ant Design. At the time it was one of the best choices out there for a quick project, as it had all the standard components with a relatively good design out of the box. Since all the easter egg fiasco / css bloat I've avoided using it.
These days, there's just much better options such as shadcn/ui [1], chakra [2] or radix [3] which when paired with frameworks such as floating ui [4] are just much better.
shadcn/ui is pretty terrible unless you already have a an entire design system you're planning on replacing the defaults with anyways.
Radix Themes (not Primitives) has the WorkOS look without awful color choices and the whole "pretending not to be a component library" gimmick https://www.radix-ui.com/
> the whole "pretending not to be a component library" gimmick
Literally the first line says that it's a component library :)
Snark aside, I'm gonna defend Radix Themes. I agree that the configurations they show on their website aren't great (and also that they should pay more attention to pixel alignment), but they have the most consistent structure I've seen, with well-defined tokens, great composability and flexibility for overrides.
I've found that, with the parameters they provide, I can get a design that is close to what I would've done myself anyways. Eventually, I guess I'll look into adding some light overrides to add a bit more shadow and fix some of the rougher edges.
Semantic UI[1] was one I used to use, both the plain CSS one as well as the React version of the library. Version 3.0 is coming (eventually), which has left it a bit outdated for a while, but it's still a solid UI library imho. I have been switching away to Tailwind.
If you want a component library that's going to give you accordions and stuff there's going to have to be a JS implementation involved.
In the early days of bootstrap, it was jQuery. Now, if you want to use bootstrap w react etc, you're going to have to have a third party implementation for the framework you're using (like react-strap if you use react)
Ant and MUI Target react directly which allows them to provide a first party JavaScript implementation for interactive components.
Tailwind is a great example of a JavaScript agnostic solution right now because it's purely concerned with CSS and leaves it to the developer to implement JavaScript stuff on their own. This way you can use things in the ecosystem like react-table and style them with tailwind CSS classes.
There's https://tailwindui.com/?ref=top, from the Tailwind CSS people. They come with a "HTML" mode, which I think means no JS.
But if you need interactivity, on the web it has to be JS, because that's the only thing that can manipulate the DOM. (Edit: To be clear, there are frameworks that COMPILE to JS, so you the programmer don't have to work in JS yourself.) The alternative would be something like a server-updated Canvas where the UI is done outside of the DOM and not in the client, but even that would need some JS shims just to communicate and redraw the Canvas.
If you want to render the entire page serverside and handle all interactions via clicks and HTTP POSTs and such, you still can, of course. That would just be slower for the visitor.
Probably a "JS-lite" approach like HTMX + Alpine would be worth considering?
I used antd at a previous company and I thought it was very nice from a design standpoint with a good look out of the box.
Development could be a little clunky with some things difficult to customize, although I think that's gotten somewhat better. I also remember a few things having Chinese documentation but missing some English translations. Haven't used it for a few years so not sure if that has been more filled in or if there are more English speaking maintainers involved now.
The mobile component library was entirely Chinese when I used it 3-5 years ago. You could still build responsive webapps using the standard components with English docs, though.
I find it hard to recommend the Angular port going forward, or at least until the Ant Design 5 sync has been made.
For those who don’t know, last year Ant Design (the design system behind both component libraries) underwent a major redesign from version 4.x to 5. This redesign didn’t just change the look & interactions but also fundamentally reworked the theming options through simplified and more comprehensive style tokens.
ng zorro still hasn’t adopted this new redesign or given a timeline/reasoning despite the GitHub issue currently being the most upvoted active one.
Not blaming the maintainers here, I understand this isn’t a simple endeavour and I’m in no position to complain since I don’t contribute but I would be very hesitant to chose ng zorro right now given the uncertainty of the situation.
This has been my goto React UI framework for a number of years now - and has helped me deliver a number of projects, ranging in size from big to small. It’s consistent, well thought out, and both clients and users like it.
I've not evaluated either of those two in the past, no. Neither of them existed last time I looked for decent competitors to Ant Design's library.
Hmm. When I go to the MUI website right now — e.g. https://mui.com/x/react-data-grid/ — and then click the hamburger menu, top-left, the resulting menu just goes nuts, glitching and toggling on and off, non-stop (Safari 17.5, on macOS Monterey). So I am unable to even look at MUI properly currently. So, quite honestly, that's the end of any further evaluation there for now. Arguably: it doesn't bode too well, but maybe they're just having a bad day? (I notice that Ant's website is totally down currently also, which I've not seen in a very long time — perhaps it's had- or they have both had- the HN hug of death?)
— But TBH, based upon what I've just read on their site: MUI isn't really going to be an option for us, because of its commercial licensing.
But their stuff might be worthy of consideration / buying a license, if their stuff totally wowed me — but the bar is set quite high with Ant, which has a lot of components, with a lot of functionality, and is fully open-sourced (and backed by some big companies, and with years of development behind it already). Their table (data grid) looks ok, but a bunch of the features (which Ant has) are commercial-only.
A quick look at Chakra shows that doesn't have a date picker, nor a calendar, and their table is nothing more than a nicely styled basic HTML table — no additional functionality — no sorters, no pagination, no filters, no row selection, no fixed-columns, all of which, and more, Ant's table already has — Granted it can likely be coupled with the likes of TanStack Table to add some of these, but that's just more work when one just wants something that just works straight out-of-the box (and TanStack Table still doesn't cover everything that Ant does).
Ant Design also has a good handful of other quite useful components, that I don't see in Chakra — Chakra seems to have about half the amount of components?
In short, to me, Chakra seems a bit too new / immature — or perhaps simply has a smaller scope? — when compared with the likes of Ant Design's React component library — which, for desktop apps, is certainly much closer to being 'enterprise grade', straight out-of-the-box, with no messing about (e.g. with third-party components, perhaps less well maintained).
It looks promising though — but I've looked at plenty of other UI libraries over the years that looked promising in their early days, but never grew particularly much, so we'll have to wait and see. But right now, it's some way from being usable on much of the stuff that I build.
I've only ever used MUI, myself, and was curious to know what others thought of similar projects. Sounds like Ant is truly FOSS and more powerful in some ways.
I have been using https://mantine.dev/
very polished and also has a very extensive collection of surprisingly useful hooks. Surprising because, whenever I try to create my own, 90% of the time mantine already has it that i can just import.
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...
That ANT Table is not complex. QT has tons of legacy and supports way more features, yet, code is easier to grasp and maintain. Also, C# and WinForms, if you don't like C++:
This just seems like a comparison of how familiar you are with any of the UI libraries. None of these are simple. You're linking me thousands of lines of code, 6000+ in the WinForms example.
I've come across this library a lot but never used it. I did inherit a project that uses chakra-ui though and have very much enjoyed using it. This seems similar, has anyone used both and have a preference for one or the other?
I ended up moving away from Ant on a project a few years back. It frustrated me that troubleshooting with specific code snippets would often bring me to Chinese-only Github issues / etc.
Conversely, I've always wondered how the Chinese (or any non-native English speaker) feels about that... must be really hard to be a dev if you can't easily read & write help requests =/
I've been using this at work and it's been incredible for getting stuff shipped. My only complaint is that the forms stuff is very tedious to write. Otherwise it's a great framework
I tend to prefer MUI but I've been working on an inherited project with Ant and it's gotten a lot better. Years back I would run in to cases where docs and forum posts were in Chinese. These days that's not an issue.
Just a quick bug report on iOS Safari, if any contributors come across this: The top carousel is more than a screen high when loading, and the "Hot" badge seems to be in the wrong place.
Component libraries are the major reason I’m still using React.
It would be so much nicer using something like Elixir LiveView for the kind of apps I’m developing. But having to implement so many basic components from scratch just doesn’t make sense.
I mean I can fully see the downsides of introducing big 3rd dependencies into a codebase but not using them would be (in my opinion) a huge waste of time.
Isn’t this a problem for other people (that aren’t using component libraries) as well?
How can anyone be productive with non React/Vue stacks for that reason?
I’d really wish there would be other solutions (web components) so I hadn’t rely on React.
Opened the homepage on mobile and it craps out majorly. Horizontal scroll with some white space and weird floating graphics, content hidden by overflow, etc. Is this a joke?
Ant Design is honestly excellent, we've used it at work for a few smaller React projects and it felt so much better than most of the other alternatives like Material UI
It's very batteries included, you don't even need to use any external form handling library
I use MUI*, but forms there is indeed a pain (you basically have to hook up a third-party forms library and connect it to the "dumb" MUI components).
How does Ant handle it?
*Minor nitpick, just for clarity: The UI framework is called MUI, which is a third-party component framework loosely based off Google's Material UI designs. Google has their own (now-abandoned, I think) Material UI web components, which are a pale shadow of what MUI offers.
MUI is also not necessarily tied to Material (although it typically is). The library can use the same core logic but be styled with different looks (Joy UI, a custom design system, or no styling at all).
In one case I was working on a real estate platform, so I had to build a listing search page (similar to Zillow). This means you're rendering lots of little dots on the map, and on hover, each one will open a popover with the listing details.
Using Ant Design brought this page to a standstill - massive performance issues, we're talking >1 second between frames. Turns out, it was rendering a unique portal element for every dot on the page, regardless of whether it was open or not.
I tried hacking it a bit but eventually gave up, and just wrote my own portal component that simply replaced the portal content with whatever you hovered over. After that we were back to 60fps.
But it is also an issue w.r.t. usability. Group elements and use progressive disclosure instead.
You could certainly make a popover per dot in any react library. It would just be bad to do so.
The mind boggles, how someone thought this was a good idea.
These days, there's just much better options such as shadcn/ui [1], chakra [2] or radix [3] which when paired with frameworks such as floating ui [4] are just much better.
[1]: https://ui.shadcn.com/ [2]: https://v2.chakra-ui.com/getting-started [3]: https://www.radix-ui.com/primitives/docs/overview/introducti... [4]: https://floating-ui.com/docs/getting-started
Radix Themes (not Primitives) has the WorkOS look without awful color choices and the whole "pretending not to be a component library" gimmick https://www.radix-ui.com/
Literally the first line says that it's a component library :)
Snark aside, I'm gonna defend Radix Themes. I agree that the configurations they show on their website aren't great (and also that they should pay more attention to pixel alignment), but they have the most consistent structure I've seen, with well-defined tokens, great composability and flexibility for overrides.
I've found that, with the parameters they provide, I can get a design that is close to what I would've done myself anyways. Eventually, I guess I'll look into adding some light overrides to add a bit more shadow and fix some of the rougher edges.
> This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps.
And what are you defending Themes from, I'm recommending it?
Thought you said that Radix is claiming not to be a component library with bad color choices.
Something like DaisyUI but using other languages when needing interactivity.
Also, tested the DatePicker and it's examples with time is unusable on mobile, renders outside of the viewport without option of scrolling.
[1]: https://semantic-ui.com/
In the early days of bootstrap, it was jQuery. Now, if you want to use bootstrap w react etc, you're going to have to have a third party implementation for the framework you're using (like react-strap if you use react)
Ant and MUI Target react directly which allows them to provide a first party JavaScript implementation for interactive components.
Tailwind is a great example of a JavaScript agnostic solution right now because it's purely concerned with CSS and leaves it to the developer to implement JavaScript stuff on their own. This way you can use things in the ecosystem like react-table and style them with tailwind CSS classes.
But if you need interactivity, on the web it has to be JS, because that's the only thing that can manipulate the DOM. (Edit: To be clear, there are frameworks that COMPILE to JS, so you the programmer don't have to work in JS yourself.) The alternative would be something like a server-updated Canvas where the UI is done outside of the DOM and not in the client, but even that would need some JS shims just to communicate and redraw the Canvas.
If you want to render the entire page serverside and handle all interactions via clicks and HTTP POSTs and such, you still can, of course. That would just be slower for the visitor.
Probably a "JS-lite" approach like HTMX + Alpine would be worth considering?
But I wouldn't be averse to trying Ant again. Last time it was lacking something I needed but that was years ago. Might be time for another attempt :)
Development could be a little clunky with some things difficult to customize, although I think that's gotten somewhat better. I also remember a few things having Chinese documentation but missing some English translations. Haven't used it for a few years so not sure if that has been more filled in or if there are more English speaking maintainers involved now.
Still think it looks nice visually overall.
It's also been ported to Angular:
https://ng.ant.design/docs/introduce/en
For those who don’t know, last year Ant Design (the design system behind both component libraries) underwent a major redesign from version 4.x to 5. This redesign didn’t just change the look & interactions but also fundamentally reworked the theming options through simplified and more comprehensive style tokens.
ng zorro still hasn’t adopted this new redesign or given a timeline/reasoning despite the GitHub issue currently being the most upvoted active one.
Not blaming the maintainers here, I understand this isn’t a simple endeavour and I’m in no position to complain since I don’t contribute but I would be very hesitant to chose ng zorro right now given the uncertainty of the situation.
Hmm. When I go to the MUI website right now — e.g. https://mui.com/x/react-data-grid/ — and then click the hamburger menu, top-left, the resulting menu just goes nuts, glitching and toggling on and off, non-stop (Safari 17.5, on macOS Monterey). So I am unable to even look at MUI properly currently. So, quite honestly, that's the end of any further evaluation there for now. Arguably: it doesn't bode too well, but maybe they're just having a bad day? (I notice that Ant's website is totally down currently also, which I've not seen in a very long time — perhaps it's had- or they have both had- the HN hug of death?)
— But TBH, based upon what I've just read on their site: MUI isn't really going to be an option for us, because of its commercial licensing.
But their stuff might be worthy of consideration / buying a license, if their stuff totally wowed me — but the bar is set quite high with Ant, which has a lot of components, with a lot of functionality, and is fully open-sourced (and backed by some big companies, and with years of development behind it already). Their table (data grid) looks ok, but a bunch of the features (which Ant has) are commercial-only.
A quick look at Chakra shows that doesn't have a date picker, nor a calendar, and their table is nothing more than a nicely styled basic HTML table — no additional functionality — no sorters, no pagination, no filters, no row selection, no fixed-columns, all of which, and more, Ant's table already has — Granted it can likely be coupled with the likes of TanStack Table to add some of these, but that's just more work when one just wants something that just works straight out-of-the box (and TanStack Table still doesn't cover everything that Ant does).
Ant Design also has a good handful of other quite useful components, that I don't see in Chakra — Chakra seems to have about half the amount of components?
In short, to me, Chakra seems a bit too new / immature — or perhaps simply has a smaller scope? — when compared with the likes of Ant Design's React component library — which, for desktop apps, is certainly much closer to being 'enterprise grade', straight out-of-the-box, with no messing about (e.g. with third-party components, perhaps less well maintained).
It looks promising though — but I've looked at plenty of other UI libraries over the years that looked promising in their early days, but never grew particularly much, so we'll have to wait and see. But right now, it's some way from being usable on much of the stuff that I build.
Cheers for the mentions though, appreciated.
I've only ever used MUI, myself, and was curious to know what others thought of similar projects. Sounds like Ant is truly FOSS and more powerful in some ways.
Thank you for sharing.
In the past we've found Antd doesn't play well with custom components, and can often have weird performance implications.
It was a decent way to get a nice UI up fast, but we quickly found a need to build custom components or go elsewhere.
Styling was also a bit of a pain iirc, though I believe things are better with Antd 4+.
At my new gig we use Tailwind + shadcn, plus an increasing number of GPT-generated one-off components :)
[0] https://www.npmjs.com/package/rc-popover
Sounds interesting, what do you mean by this? Do you have a workflow or process? Is this generating styled reusable components?
[0]: https://v0.dev
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...
And while complex, it's not hard to follow.
Here's the source of DataTables: https://github.com/DataTables/DataTablesSrc (https://datatables.net/)
https://github.com/qt/qtbase/blob/5d1ded3359ee8bffa33a4b83d5...
That ANT Table is not complex. QT has tons of legacy and supports way more features, yet, code is easier to grasp and maintain. Also, C# and WinForms, if you don't like C++:
https://referencesource.microsoft.com/#System.Windows.Forms/...
Yet the Ant link is just 600 lines.
Not necessarily just because of CCP shenanigans, but also US ones (like if an administration suddenly decides to impose software import restrictions).
MUI is international (founded in France & UK: https://mui.com/about/), and Chakra is Nigerian (https://v2.chakra-ui.com/)
It saddens me that this matters in this day and age, but if you're adopting a UI kit for long-term corporate usage, it is worth considering...
It would be so much nicer using something like Elixir LiveView for the kind of apps I’m developing. But having to implement so many basic components from scratch just doesn’t make sense.
I mean I can fully see the downsides of introducing big 3rd dependencies into a codebase but not using them would be (in my opinion) a huge waste of time.
Isn’t this a problem for other people (that aren’t using component libraries) as well?
How can anyone be productive with non React/Vue stacks for that reason?
I’d really wish there would be other solutions (web components) so I hadn’t rely on React.
It's very batteries included, you don't even need to use any external form handling library
How does Ant handle it?
*Minor nitpick, just for clarity: The UI framework is called MUI, which is a third-party component framework loosely based off Google's Material UI designs. Google has their own (now-abandoned, I think) Material UI web components, which are a pale shadow of what MUI offers.
MUI is also not necessarily tied to Material (although it typically is). The library can use the same core logic but be styled with different looks (Joy UI, a custom design system, or no styling at all).