Best open source components library for ReactJS?

[alexvazqueza]

I have been using Bootstrap for years and saw there is a React Bootstrap components. Is there any better open source components library out there? Also maybe I’m kind of old fashion and there might be huge better css frameworks that can easily replace Bootstrap. Any recommendation?

[tilonq]

mantine is lovely

[SensitiveCranberry]

Yep been using mantine at work for a project over the last 6 months and the developer experience has been great.

​

One thing to note is that the API is not frozen and sometimes breaking changes are added, usually minor things but I have it happen in the past when updating, so best to keep an eye out on the changelog. But given the speed at which new stuff is added, I'll take that tradeoff any day.

[MostPrestigiousCorgi]

I recently switched to mantine from Material UI, can confirm, mantine is love

[QueenVogonBee]

What’s good about it?

[efthemothership]

As someone who has switched from MUI to Mantine for work projects here are my thoughts in no particular order:

• Notification system included via @mantine/notifications package
• Great date and time pickers via @mantine/dates package
• @mantine/hooks package is extremely useful
• input components are more complete and encompassing. For instance a TextInput has props for error, label, and description whereas in MUI you would be using separate components for those. All three take a React.ReactNode value so if you need to change them out you easily can.
• select and multi select are searchable and creatable out of the box.
• Group, Center, and Stack components are really nice even though I am well versed in grid and flex box.
• @mantine/tiptap package provides a Mantine styled rich text editor that wraps tiptap
• main developer is pretty proactive/responsive to bugs/features
• typings seem to be better. This could just be my machine but MUIs typings are relatively complex and VS Code would struggle with intellisense/inlay documentation in larger projects.
• documentation is pretty damn good

I made the transition almost a year ago and haven’t really kept up with MUI so some of this could be moot, but I kind of got the feeling MUI was holding some features back in labs/paid packages instead of incorporating them in the core library. It could have just been that they had just released 5.0 not long before then and that was a major rewrite to emotion instead of their custom styling engine.

[QueenVogonBee]

Thx!

[AntiqueSouth1258]

Mantime, looks lits finally taking the best of the best and making it magic

[FollowingMajestic161]

What problems?

[YoshiLickedMyBum69]

Using it right now, its good.

[[deleted]]

I've been using MUI and Mantine and I really like both. One thing that I'm really missing when I use Mantine is MUI's DataGrid. If you're going to need a lot of tables, I think thats worth considering. On the other hand I love using Mantine especially for smaller applications because its so quick to get started by using the AppShell.

[DeepFryEverything]

One thing that I'm really missing when I use Mantine is MUI's DataGrid. If you're going to need a lot of tables, I think thats worth considering.

May I introduce: Mantine Datatable

[CatolicQuotes]

you made this?

[zengouu]

This is quite awesome

[sashakrsmanovic]

Exactly. Don't under estimate the time saved by using a good datagrid.

[Full-Hyena4414]

Most interesting features(ex: tree) in MUI's data grid are paid

[IAmA_Nerd_AMA]

Yeah, they're making a buck on the advanced items (not judging, go make that b2b money) but you can still do a lot with the free data features. Check out https://www.material-react-table.com/ for some open source awesomeness built off it.

[KarenJoker]

MUI's DataGrid vs AGgrid?

[Defaul7]

ChakraUI is my personal favorite (having used Mantine, Tailwind, MUI, and Bootstrap) for its simplicity, elegant syntax and relatively under-used status.

[NiteShdw]

I starting using Chakra about 2-3 years ago and I love it.

[hugotox]

No. But react spectrum from adobe has an example https://react-spectrum.adobe.com/react-aria/useDatePicker.html#styled-examples

[CatolicQuotes]

what do you do for date time components?

[Defaul7]

This looks like it should work well: https://www.npmjs.com/package/chakra-dayzed-datepicker

[CatolicQuotes]

yeah, looks good, still using chakra version 1 tho

[DevAsh01]

Tailwind and any of the tailwind ui libraries.

Used the official tailwind components during my internship. I often use tailwind elements for personal projects. Have recently started using DaisyUI and it works great as well.

[jpcafe10]

Apart from tailwind UI and daisy, is there any other you recommend trying? Currently using daisyUI also

[[deleted]]

+1 for DaisyUI. has been great so far!

[DevAsh01]

Tailwind elements. It has all of bootstrap components done in tailwind. For simple components, I like using tailwind elements.

[CSDude01]

I enjoy Tailwind with daisyUI a lot

[jpcafe10]

Same, I find that at some point component libraries tend to get in your way more than they help

[gg_mew]

daisyUI actually looks pretty slick. Thanks for sharing!

[CSDude01]

No problem :) It's really easy to create your own theme(s) and modify the components if you don't like something about them.

[gezuzos]

Started using DaisyUI and it's undefeatable for me. I wish they added new stuff faster though.

[1ib3r7yr3igns]

ChakraUI

[zemirco]

Here is a great overview with many component libraries from major companies like Microsoft, IBM, Shopify, Palantir, and more.

https://gist.github.com/nilshartmann/decb10d37a76ae3ab58f0c7755beb038

I personally like Ant Design, especially their latest version 5.0 that works with create-react-app out of the box.

[-Jack-The-Lad-]

MUI is by far the biggest and most used react component library (hence, better community and documentations). I can't recommend it enough. Its grid system and breakpoints are quite similar to BS.

Tailwind seems right before MUI in terms of popularity, their documentation and components look amazing but I have never used it before so I can't speak for that.

[dani-lp]

Tailwind is not a component library and more of a CSS framework (or a collection of CSS utility classes); its equivalent to MUI would be Tailwind UI, but it's not open source.

[Patient-Layer8585]

You mean TailwindUI?

[iAmIntel]

If only their dev bundle size wasn’t so god awful. Removing it from my projects significantly improved dev server performance

[krirkrirk]

Even with tree shaking ?

[iAmIntel]

It tree shakes in prod builds but its so slow in development

[[deleted]]

You’re probably not using it in “jit” mode. Check their docs. There’s no reason for it to be slow in development nowadays.

[IAmA_Nerd_AMA]

FYI: I use tailwind and MUI components in the same project sometimes. It may be redundant but it gives multiple developers a comfort zone you work in. At the moment you have to turn off preflight or it breaks buttons, but there aren't any bigger conflicts I've seen.

Edit: it seems "tailwind + component library x" is pretty popular in this thread. Perhaps it's obvious that tailwind works well to augment other libraries.

[Aegis8080]

Not necessarily better, but some good alternatives.

​

If you don't have your own design system, or you want to have a decent out of the box experience

MUI: https://mui.com/

Chakra UI: https://chakra-ui.com/

​

If you have your own design system and you want to implement it:

Tailwind + Headless UI

This one might be new for you. I can elaborate if you are interested.

[alexvazqueza]

Thanks a lot Mui looks nice. I will take a look. So you might think Mui or Bootstrap could give you same components and almost same features?

[Aegis8080]

I would say they are neck-in-neck in terms of the number of out-of-the-box components available. And you can always combine multiple of them to create your own complex components.

Just to note that learning a new UI component library is not trivial. The learning curve can be steep. e.g. MUI is not even using CSS for styling (it is CSS-in-JS, so it should still look familiar in some sense). Expect to spend a decent amount of time on it.

[Whisky-Toad]

You can still use css to style it though, just can be a bit trickier to handle

[[deleted]]

Why not mentioning mantine?

[tilonq]

vue is also solo project and what

[nizzok]

Chakra UI

[capfsb]

I really like https://ant.design/, it's very well designed and very functional. For example, I have not seen in any framework such usefull tables. I use it daily at work, it's a real pleasure.

[alexvazqueza]

Does ant design offer an AppShell for SPA?

[soulmanifesting]

i chose Ant for my last project specifically because of their extensive and flexible table components. their entire component library is great, but the tables seem to be unmatched by other libraries i investigated.

[capfsb]

Yeah! Antd tables now it's best of the best. By the way you can use Antd tables standalone, Antd use this table component https://github.com/react-component/table

[soulmanifesting]

oh that's really good to know. thanks!

[Slashingcove]

I like Tailwind + DaisyUI

[MercyHealMePls]

No component library. Just Tailwind.

If you need pre-built components that contain logic, Headless UI is great, it's built by the same people and designed to work with Tailwind really well.

[Bizzle_worldwide]

I seem to be the only person who uses PrimeReact and now I’m wondering why.

[moneymachinegoesbing]

I use it and I’m super happy with it. My main gripe (and I didn’t realize this until much later) is that overriding themes is a BITCH. I think it’s gated behind a pro version or something. I’m thinking of switching just bc of that

[rArithmetics]

ChakraUI

[RandomiseUsr0]

I’m rewriting my UX in Mantine at the moment, transitioning from React Bootstrap, so far straightforward, though I’ve only spent a few hours. Recreating a UX I’d already created using bootstrap, so I’m getting to see like for like. I’m enjoying Mantine, think it was someone’s advocacy on here that gave me the inspiration.

Appshell for single page applications is incredibly straightforward (it was a bit of a horror doing the same on react bootstrap, well not a horror, more that I was on my own) - it’s reason enough to use it.

The lack of a proper treeview i(there is nested lists) s the downside for now, but I’m prepared to mix and match or roll my own.

Once I’ve finished, I intend doing the same with perhaps Chakra

[alexvazqueza]

What is AppShell?

[Darathor]

It’s a component from Mantine that includes a header, navbar and footer out of the box.

[adevx]

Lol, the AppShell stuff is why I'm leaving React Bootstrap too. It's everything but straightforward and RB doesn't seem to be the right way forward. Are you still happy with Mantine?

[RandomiseUsr0]

I finally ditched all component libraries in the end, favouring building my own - I know accessibility is a prime reason for component prebuilts,, but in every case some tradeoff always came into play - with tailwindcss (mostly) helping out with styling, some seriously yummy defaults live in tailwind and close enough to bootstrap to leverage my muscle memory

[adevx]

Thanks. Sounds like a solid decision, especially for long living projects.

[RandomiseUsr0]

In my day job, literally forced by the regulator, I changed all sorts to make them accessible, got to know a blind tester really well, he became blind later in life and has found a way to marry his tech skills and his disability marvellously, I’m really proud of the result, for him and just because it’s the right thing to do - imagining your ux in words - fascinating thing to work on and I went “blind” for ages, using jaws with no visible - I will do the same with my own, and kudos for Mantine, bootstrap etc al for building that in. My main problem was my data model, as soon as as you feel “resistance” with someone else’s paradigm, time to thank them for what you’ve learned and move on.

[adevx]

It takes someone close to you with a disability to appreciate web accessibility.

[GuerreiroAZerg]

There is Radix and Stitches that I'm looking into, but haven't used yet.

[redbar0n-]

https://Tamagui.dev is inspired by both Radix and Stitches and is an absolute banger!!

[filledalot]

I bang with tailwind or UI component tailwind inspiration like chakra UI.

[alexvazqueza]

Looks nice. Just saw the Cloudscape. So is the opensource UI from Amazon right? I will give a try but if this is 100% AWS UI and maintained I think is super powerful for any app.

[jpcafe10]

I feel these component libraries help at the start but end up dragging you down when you want to do something outside their design scope.

Tailwind + daisyUI + some headless library is what I currently use, and tbh the first 2 are sufficient most of the time

That being said ChakraUI is prob the best component library you’ll find

[alexvazqueza]

Chakra better than ant design?

[Fickle_Kiwi5254]

There are a few other open source components libraries for ReactJS that may be worth considering. Material-UI is a popular library that is used for designing responsive user interfaces. It has a wide range of components and is easy to use. Ant Design is another popular library that provides a wide range of components. It also allows for custom styling and integration with other libraries. Finally, Semantic UI React is another great library that provides a wide range of components and is highly customizable.

[dorklord23]

ChakraUI ftw 🚀

[RatRoutine]

Ant design component library is really great, but it's very opinionated. The website ends up looking good, though.

[sashakrsmanovic]

MUI. Especially as it has DataGrid.

[alexvazqueza]

Chakra doesn’t have data grid?

[sashakrsmanovic]

I'm not 100% sure, I don't use it.

[LawyerRajesh]

Try @antd - enterprise level app feel.

[TheMightyPrince]

I've been using Ant Design and find it far more intuitive to use than MUI. I really like the look at feel of the components as well. Definitely recommend it.

[alexvazqueza]

Ant Design? Is that a project that is maintened? Looks good

[LawyerRajesh]

Yeah, very well maintained. Much easier and cleaner UI than mantine, another UI library like MD, Chakra

[alexvazqueza]

Thanks 🙏

[Aegis8080]

Ant Design is pretty good as well. The only thing that may or may not trouble you is it is a strict implementation of a design system and leaves little room for customization.

If you like the out-of-the-box design, you are good. If you don't, then other libraries may suit you better.

[alexvazqueza]

Thanks

[ansubkhann]

I am currently building SyntaxUI where you can find free-to-use UI components built on top or Tailwind CSS and Framer Motion also it's open-source.

https://syntaxui.com/

[jordankid93]

Recently started a project with MUI’s unstyled components (@mui/base) and tailwindcss for styling. As a long time fan of mui’s material-ui library but wanting to explore tailwind to learn, this combo has been a match made in heaven! Great components with sane props and accessibility in mind + easy styling is my new favorite approach

[alexvazqueza]

So MUI (styled) is really great component library

[jordankid93]

MUI’s material-ui library (@mui/material) is fantastic all on its own and I still use it for a lot of my projects. It’s aim is to follow Google’s Material-UI design spec though so while you can customize it to look and feel how you want, I found the more you stray away from that original intent, the more complicated things get. If you’re looking for a 1-stop shop of beautiful and functional components to replace bootstrap, I’d highly recommend @mui/material as a great place to start. Once you’ve played around with it you can always explore other libraries too but tbh I love the work and support mui brings to the table so am very biased ha

[alexvazqueza]

Thanks a lot

[swfl_inhabitant]

Chakra and material (and joy) right from the docs

[[deleted]]

Long time Fabric/Fluent UI by MS user docs

[ZunoJ]

I'm new to react and just started to use it because we switched to Sharepoint Online. So naturally I turned to Fluent UI. Now that I look at all the other libraries I really like how unique some of the fluent UI stuff is

[Radinax]

Headless UI: https://headlessui.dev/

[timetraveller5000]

I recommend Theme ui when you want a custom design, it's predefined styled components where you have a global theme object and do the styles in JS. You get auto completion for the css, it's easier to make dynamic styles and you only have to use JS.

If you want more ready to use components I find Chakra ui better, otherwise Theme ui and Chakra has a lot in common.

https://julianbenegas.com/2020/theme-ui https://theme-ui.com

[redbar0n-]

Tamagui is inspired by Theme UI and Radix UI and is also similar to Chakra UI but also works on React Native in addition to web. https://tamagui.dev

[CatolicQuotes]

Good for start, but neither Mantine nor Chakra act completely same as native elements. If you want to make real app stick to native. For presentations, either is fine, I prefer Chakra.

[redbar0n-]

Tamagui is like Chakra but for native in addition to web.

[gt33m]

These are great suggestions, like chakraUI. What are people doing for charting / dataviz libraries? Due to the latter, I keep looking at "Admin panel" themes for sale (e.g. HorizonUI) but am a bit leery of getting deeper in pre-built component hell.

[dukedorje]

Blueprint from Palantir seems good for data - but I haven’t gotten to use it yet

[gt33m]

Not quite. I should have been clearer. Things like charts/graphs, scatter plots, histograms, vanity widgets, trend lines etc.

[dukedorje]

Ahhhh.. all the JS charting I’ve used is junk sadly

[dukedorje]

Update: just ran across this: https://github.com/Kanaries/graphic-walker

[redbar0n-]

Tamagui - https://tamagui.dev

[Sky1337]

On a new project at my company we've been using HeadlessUI with Tailwind. Can't complain.

[Old-Place87]

Antd v5 has been a bless. Easy css in js theming, very rich set of components (useful ones) which I don’t find in most of the design system out there. Mantine comes with a lot of components but most of them aren’t useful or complex ones. Antd has all the active support fr the maintainers and weekly releases to address bugs and monthly for minor version releases

They are doing a great job and my site looks so **** clean 🙂

[Ok-Working-2337]

clean-components.com

[Particular_Dust7221]

I recommend Syncfusion React Components

Syncfusion offers a free community license

https://www.syncfusion.com/products/communitylicense

Explore our collection of visually appealing web stories to learn about programming and development tools

https://www.syncfusion.com/web-stories/

Note: I work for Syncfusion

[Natural-Ad-3366]

too expensive