8 ms·
Ant Design – the second most popular React UI framework
- bastawhiz 2y agoI'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
- martypitt 2y agoI've worked with several react colleagues who have used this framework heavily, and have good things to say. It's also been ported to Angular: https://ng.ant.design/docs/introduce/en https://ng.ant.design/docs/introduce/en
- peer2pay 2y agoI 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.
- jimsmart 2y agoThis 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.
- solardev 2y agoHave you ever compared it to other frameworks like MUI or Chakra? What are your thoughts?
- jimsmart 2y agoI'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/ 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.
- vevoe 2y agoI'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?
- solardev 2y agoI've always been afraid to use Ant because it's Chinese: https://github.com/ant-design https://github.com/ant-design 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/ https://mui.com/about/), and Chakra is Nigerian (https://v2.chakra-ui.com/ 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...
- gradyfps 2y agoI 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.
- solardev 2y agoConversely, 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 =/
- Kiro 2y agoWhich one is the most popular?
- solardev 2y agoProbably the excellent MUI: https://mui.com/ https://mui.com/
- osmano807 2y agoIsn't there any UI framework alternative for the web that doesn't use JavaScript or Typescript? 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.
- felixrieseberg 2y agoIt sounds like you're looking for CSS frameworks and plenty of them exist - Bootstrap for instance doesn't require you to use the JS part of it.
- solardev 2y agoThere's https://tailwindui.com/?ref=top 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?
- satvikpendem 2y agoI mean, you can use any compile to WASM language and framework like Flutter, Rust, .NET, all of which have their own UI libraries.
- xigoi 2y agoBut then the UI will be rendered on a canvas instead of using the DOM, which is awful for accessibility.
- 2y ago
- klaussilveira 2y agoHow anyone finds this code maintainable is beyond me: https://github.com/ant-design/ant-design/blob/master/components/table/InternalTable.tsx https://github.com/ant-design/ant-design/blob/master/compone...
- totaa 2y agotable components are typically the most complex. this is cleaner: https://github.com/ant-design/ant-design/blob/master/components/alert/Alert.tsx https://github.com/ant-design/ant-design/blob/master/compone...
- lghh 2y agoI'm not sure anyone does.
- solardev 2y agoWhat'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/components/table/InternalTable.tsx#L583-L615 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 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...
- agumonkey 2y agoIt's long but it's not bad imo.
- hombre_fatal 2y ago
- enlyth 2y agoAnt 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
- solardev 2y agoI 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).
- naet 2y agoI 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. Still think it looks nice visually overall.
- tempoponet 2y agoThe 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.
- continuational 2y agoJust 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.
- say240702 2y agoSecond most popular globally normalised for spikes in specific countries?
- ibejoeb 2y agoWho remembers Ext JS? Ant is like that for reactive js kits. It's got pretty much everything. It certainly is useful for building internal products.
- robertoandred 2y agoIs this for companies that don’t have their own designers?
- processunknown 2y agoWho remembers the christmas easter egg fiasco? https://blog.shunliang.io/frontend/2018/12/25/the-ant-design-xmas-egg-that-went-wrong.html https://blog.shunliang.io/frontend/2018/12/25/the-ant-design...
- frozenlettuce 2y agoI worked in an oil & gas company when that happened. Luckily, we had no customers in the Middle East at that time
- rat9988 2y agoThe reason I moved off antd.
- LASR 2y agoI 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.
- gpspake 2y agoI 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.
- danielvaughn 2y agoI'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.
- mikojan 2y agoRendering "too many" components is an issue with most popular React frameworks. But it is also an issue w.r.t. usability. Group elements and use progressive disclosure instead.
- danielvaughn 2y agoYeah 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.
- diob 2y agoI've always defaulted to MUI and never regretted it. Easy to style, customize, and great docs.
- ajkjk 2y agoWas there some reason that Ant inherently require it working that way, as opposed to it being a mistake in the application code?
- hombre_fatal 2y agoIt'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.
- lacoolj 2y agoMy favorite UI library is Blueprint (https://blueprintjs.com/docs/ https://blueprintjs.com/docs/) by Palantir 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 :)
- ChrisArchitect 2y agoDiscussion on a Show HN: from 2016: https://news.ycombinator.com/item?id=13053137 https://news.ycombinator.com/item?id=13053137
- jumploops 2y agoMost of the Antd components wrap `rc-[x]` components[0] with a stylish UI. 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 https://www.npmjs.com/package/rc-popover
- hreynier 2y ago> 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?
- r6203 2y agoComponent 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.
- tobeagram 2y agoBack 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. [1]: https://ui.shadcn.com/ https://ui.shadcn.com/ [2]: https://v2.chakra-ui.com/getting-started https://v2.chakra-ui.com/getting-started [3]: https://www.radix-ui.com/primitives/docs/overview/introduction https://www.radix-ui.com/primitives/docs/overview/introducti... [4]: https://floating-ui.com/docs/getting-started https://floating-ui.com/docs/getting-started
- BoorishBears 2y agoshadcn/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/ https://www.radix-ui.com/
- SebastianKra 2y ago> 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.
- BoorishBears 2y agohttps://ui.shadcn.com/docs https://ui.shadcn.com/docs > 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?
- Pwntheon 2y agoOpened 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?
- hyuuu 2y agoI have been using https://mantine.dev/ 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.