Light UI component library but as good as MUI (or atleast close to it)?

This page summarizes the projects mentioned and recommended in the original post on /r/reactjs

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • react-daisyui

    daisyUI components built with React ๐ŸŒผ

  • do you mean react.daisyui.com? it only have 6k~ npm downloads that's why I didn't actually think anybody actually mean it when they say that they are using daisyUI

  • daisyui

    ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library

  • please do correct me if I'm wrong... but doesn't accessibility include supporting keyboard navigating and adding ARIA attributes but daisyUI is entirely just for styling, right?

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • eslint-plugin-jsx-a11y

    Static AST checker for a11y rules on JSX elements.

  • WAI-ARIA is important if you are writing custom components and do not follow the general rules for HTML tags. For example, if you are using a `div` as a button, you would need to add tags for accessibility. Yes, there are some other instances, like adding alt text to images or adding a title to an iframe, but these can all be handled with warnings in the editor using the jsx-a11y eslint plugin. Some other nuance will be up to the developer to make sure they follow the proper accessibility structure, but most use cases are outlined in the Daisy UI tailwind examples, they do a great job of using HTML properly and give fully accessible examples for their components. Take a look at the accordion example, you can tab into the accordion and use the arrow keys to navigate.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts