afc163•1y
Ant Design – the second most popular React UI frameworkgithub.com
66 comments
  • danielvaughn•1y

    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.

    • diob•1y

      I've always defaulted to MUI and never regretted it. Easy to style, customize, and great docs.

    • mikojan•1y

      Rendering "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•1y

        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.

    • ajkjk•1y

      Was there some reason that Ant inherently require it working that way, as opposed to it being a mistake in the application code?

      • hombre_fatal•1y

        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.

        • danielvaughn•1y

          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).

        • ajkjk•1y

          Right but the dots aren't popovers. The dots trigger popovers. You should have one dot per dot and one popover per popover.

          You could certainly make a popover per dot in any react library. It would just be bad to do so.

    • solardev•1y

      How were you drawing your maps?

  • processunknown•1y

    Who remembers the christmas easter egg fiasco? https://blog.shunliang.io/frontend/2018/12/25/the-ant-design...

    • frozenlettuce•1y

      I worked in an oil & gas company when that happened. Luckily, we had no customers in the Middle East at that time

    • LASR•1y

      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.

    • rat9988•1y

      The reason I moved off antd.

  • tobeagram•1y

    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.

    [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

    • BoorishBears•1y

      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/

      • SebastianKra•1y

        > 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•1y

          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?

          • SebastianKra•1y

            ... I must have misread the without in that sentence 15 times. My bad.

            Thought you said that Radix is claiming not to be a component library with bad color choices.

  • osmano807•1y

    Isn'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•1y

      It 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.

    • elliottcarlson•1y

      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.

      [1]: https://semantic-ui.com/

    • gpspake•1y

      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.

    • solardev•1y

      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?

    • satvikpendem•1y

      I mean, you can use any compile to WASM language and framework like Flutter, Rust, .NET, all of which have their own UI libraries.

      • xigoi•1y

        But then the UI will be rendered on a canvas instead of using the DOM, which is awful for accessibility.

        • satvikpendem•1y

          Not all of them are canvas based, some like Dioxus render HTML and CSS.

  • lacoolj•1y

    My favorite UI library is Blueprint (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 :)

  • naet•1y

    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.

    Still think it looks nice visually overall.

    • tempoponet•1y

      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.

  • martypitt•1y

    I'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

    • peer2pay•1y

      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.

  • ibejoeb•1y

    Who 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.

  • jimsmart•1y

    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.

    • solardev•1y

      Have you ever compared it to other frameworks like MUI or Chakra? What are your thoughts?

      • jimsmart•1y

        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.

        Cheers for the mentions though, appreciated.

        • solardev•1y

          Thanks for this overview!

          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.

  • jumploops•1y

    Most 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

    • hreynier•1y

      > 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?

      • pocketarc•1y

        Given it's Tailwind + shadcn, I'd be surprised if it's not v0[0].

        [0]: https://v0.dev

        • jumploops•1y

          We’ve used v0 a bit, and it’s getting better(!), but generally just use a custom system prompt that knows our tech stack (Supabase, Next.js, etc.)

  • hyuuu•1y

    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.

  • klaussilveira•1y

    How anyone finds this code maintainable is beyond me: https://github.com/ant-design/ant-design/blob/master/compone...

    • solardev•1y

      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...

    • totaa•1y

      table components are typically the most complex. this is cleaner: https://github.com/ant-design/ant-design/blob/master/compone...

    • hombre_fatal•1y

      Compared to what? It's a complex component that doesn't get any simpler if you change UI platforms.

      And while complex, it's not hard to follow.

      Here's the source of DataTables: https://github.com/DataTables/DataTablesSrc (https://datatables.net/)

    • lghh•1y

      I'm not sure anyone does.

    • agumonkey•1y

      It's long but it's not bad imo.

  • vevoe•1y

    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?

    • solardev•1y

      I've always been afraid to use Ant because it's Chinese: 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/), 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...

      • gradyfps•1y

        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.

        • solardev•1y

          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 =/

  • bastawhiz•1y

    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

  • Kiro•1y

    Which one is the most popular?

  • gpspake•1y

    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.

  • say240702•1y

    Second most popular globally normalised for spikes in specific countries?

  • continuational•1y

    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.

  • ChrisArchitect•1y

    Discussion on a Show HN: from 2016: https://news.ycombinator.com/item?id=13053137

  • r6203•1y

    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.

  • Pwntheon•1y

    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?

  • robertoandred•1y

    Is this for companies that don’t have their own designers?

  • enlyth•1y

    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

    • solardev•1y

      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).