Headless

Headless is the new trend, and for good reason! People can’t agree on a styling system. Headless components allow you to just use their markup/logic/automation, without having to wrestle and work hard to integrate their styling system of choice with your own.

https://headlessui.com/react/disclosure

React

- Comprehensive list

MUI.com - Probably the best framework if you want to follow Google Material Design guidelines. Easily customize the color scheme.

Mantine - Beautiful, very customizable with clean CSS. Nice buttons. Easy to work with. Like Chakra, but less padding on everything. Looks more like Ant Design, but better. Not as many features as Ant. It doesn’t have Chakra’s thick blue outline :focus on everything which is so difficult to customize or get rid of. But you can add CSS for it on your own site if you need it.

Chakra - Beautiful, customizable, with simple CSS. Easy to work with. Like Mantine, but more padding on everything, and has a built-in thick light blue outline that shows up on :focus. It’s great for accessibility, but not really possible to override/remove.

Radix - Unstyled primitives. You style it yourself. This is a growing trend. This is not a complete collection of form field components unfortunately, but has a lot of useful other stuff!

Ant Design - What companies like Alibaba, Tencent, and Ant Financial use for their UI. Very many features! Customizing the CSS - can be tough to override the ant stylesheet’s specificity.

Pure HTML/CSS, no JavaScript

https://readyui.co/ - very good basic marketing+app snippets. Easy copy/paste.

There is also a very good one for Google Material Design guidelines, forget what it’s called.

Universal libraries

There are a growing number of component libraries that package for all popular JavaScript libraries. You can use any of their components in React/Angular/Vue/Svelte, etc.

https://papanasi.js.org - Here’s a cute one that uses Mitosis library from Builder.io to transpile their components for multiple frameworks.