Originally published in sendilkumarn.com
Crafting your next React project and wondering what UI library or framework to choose. Check out the following options:
Tailwind css is amazing. It has become the default option for all my new projects. It simplifies building slick user interfaces at ease.
Tailwind is a utility first CSS framework and packed with "well" named classes. The classes are almost intuitive but there is a little bit of learning attached with it. You can completely design your site without writing CSS Styles.
- Easier to style your components
- Provides CSS-handlers for animations, transitions, transformations, interactivities with HTML elements
- More advanced options with
- Initial learning curve is steeper and getting used to class names
- It is just a CSS framework not a full-fledged UI component framework. If you are looking for complete UI component library check out headlessUI
Type: CSS framework
Optimisation: ⭐ ⭐ ⭐ ⭐ ⭐
Customisation: ⭐ ⭐ ⭐ ⭐ ⭐
Accessibility: ⭐ ⭐ ★ ★ ★
Guillermo Rauch@rauchgIf I had to recommend a way of getting into programming today, it would be HTML + CSS with @tailwindcss
The RoI is just incredible. This responsive demo is just ~21 custom CSS props. The whole thing is mostly built-in tailwind classes and vanilla HTML.
codepen.io/maizzle/pen/zm…02:47 AM - 07 Feb 2020
Radix UI is a minimal UI component library. It provides an unstyled, accessible, and customisable UI components. One of the standout feature of Radix UI is its support for accessibility.
- Components are un-styled and allows full customisation
- Supports animation with both CSS and JS libraries
- Amazing accessibility conformance and thoughtful API design
- Allows server side rendering of components along with responsive styles (thanks to stitchesjs)
- Allows including components individually (modular NPM packages), thus enabling incremental adoption.
- Few components like select, toast are missing yet
- Too many customisation options
- Components are unstyled
Type: UI Component library
Optimisation: ⭐ ⭐ ⭐ ★ ★
Customisation: ⭐ ⭐ ⭐ ⭐ ⭐
Accessibility: ⭐ ⭐ ⭐ ⭐ ⭐
Josh W. Comeau5. Radix Primitives
This is a *phenomenal* set of accessibility-focused UI primitives. All of the really-hard-to-get-right stuff like dialogs, accordions, menus, scroll containers. Bring your own styles.
The team is wonderful, too!17:42 PM - 04 Jan 2022
Next UI is a theme-able React UI library. It is simple, elegant UI library that makes it easier to build modern, fast web applications.
- Components are themeable with default styles
- Good accessibility defaults and thoughtful API design
- Sensible utilities with stitchesjs
- Optimises for the runtime performance by removing unnecessary styles
- Few components like dropdown, navbar are missing yet
- Do not Allow including components individually
Type: CSS framework
Optimisation: ⭐ ⭐ ⭐ ⭐ ★
Customisation: ⭐ ⭐ ⭐ ⭐ ★
Accessibility: ⭐ ⭐ ⭐ ★ ★
NextUI@getnextuiHey Guys 👋
NextUI is finally launching on Product Hunt!! 🚀🎉
If you like using NextUI please support us ❤️
producthunt.com/posts/nextui12:37 PM - 26 Jan 2022
Chakra UI focuses on building simple and composable components. Chakra UI has a cleaner API and provides complete components.
- Sensible accessibility defaults out of the box
- Allows including components individually (modular NPM packages)
- Components are themeable and composable
- Amazing docs that help you to get started
asand style props on the components are amazing
- Bundle size is slightly bigger than other frameworks. (Refer here)
- Steeper learning curve
Type: UI components library
Optimisation: ⭐ ⭐ ★ ★ ★
Customisation: ⭐ ⭐ ⭐ ★ ★
Accessibility: ⭐ ⭐ ⭐ ⭐ ★
Ryan FlorencePeople throw React component libraries and design systems at me regularly.
This might be the best one I've seen. The APIs are simple but composable and the accessibility on the couple components I looked is complete.
Great work @thesegunadebayo, really inspiring work. twitter.com/thesegunadebay…14:44 PM - 04 Sep 2019Sage ⚡️ @thesegunadebayo🚀 Introducing Chakra UI ⚡️ I’m very excited to share my latest project, Chakra UI. A React-based Component Library. I’ve created over 40+ composable and accessible components to help you create React apps and website with speed. Check it out here: https://t.co/ntrRBvfo2R https://t.co/Kq0cgbrCMr
What is your favorite CSS framework / library? Please comment them below :)