Ant Design – the second most popular React UI framework
github.com
github.com
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.
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:
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 :)
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).