Top 9 Best UI Component Libraries/Frameworks in 2022 for Frontend Developers🔥

This page summarizes the projects mentioned and recommended in the original post on dev.to

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.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

  • FlowBite is a modular CSS component library for faster and easier web development. It provides a solid foundation for your project with a responsive grid, consistent typography, customizable components, and extensible architecture. It is an open source library, so you can customize it to suit your specific requirements. It provides over 450+ UI components (such as buttons and forms), sections (such as headers, footers, navbars), and pages built with the utility classes from Tailwind CSS – all designed using Figma's iconic user interface design software. The number of components Flowbite offers developers makes it easy to build complex, fast-loading web applications and sites.

  • 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
  • antd

    An enterprise-class UI design language and React UI library

  • The first version of Ant Design was released at the end of 2016 after 18 months of development effort with over several hundred engineers involved in the project. It included more than 400+ components covering all major features required by modern web applications—from common form elements to complex data tables or interactive charts. With Ant Design, you can build modern websites and web apps and integrate it with React, VueJS, Angular, or multiple different JavaScript frameworks. To date, it has been downloaded over (npm) 110 million times and it has around 60,000 GitHub stars.

  • Foundation

    The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

  • Foundation comes in two flavors: Foundation for Sites (formerly known as Foundation v5) and Foundation for web Apps (formerly known as Foundation 6). Both are open source but the latter comes with additional features specifically tailored for building browser-based apps like web apps or native iOS/Android apps using React Native. To date, it has been downloaded over (npm) 23 million times and it has around 29,000+ GitHub stars.

  • Bulma

    Modern CSS framework based on Flexbox

  • Bulma is completely modular so you can use only those elements that suit your project best. All components and elements are well documented so you won't have problems understanding how they work together and how to customize them if needed. It also aims to provide a clean, comfortable, and elegant design. It includes several modules: buttons, forms, tables, navigation bars, tabs, and more. To date, it has been downloaded over (npm) 35+ million times and it has around 46,000 GitHub stars.

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

  • Chakra UI is fully compatible with the WAI-ARIA accessibility standard. Chakra UI is built on TypeScript and JavaScript. You can use Chakra UI to easily create your own design system, or you can install only some of its components. Customizing the components and themes is quite easy thanks to the use of style props. It focuses on the process of development, with a promise that you'll spend less time writing code and more time building great user experiences. To date, it has been downloaded over (npm) 16+ million times and it has around 28,000+ GitHub stars.

  • Semantic UI

    Semantic is a UI component framework based around useful principles from natural language.

  • Semantic UI is a free, open source library that helps you build UIs with confidence. It provides over 3000+ Theming Variables and 50 + UI components and each one of them has been carefully designed to look beautiful and work intuitively. It is designed to be an intuitive, accessible, and flexible starting point for your project. It's packed with features that you can use right out of the box, and it's very easily customizable. To date, it has been downloaded over 6 million times and it has around 50,000 GitHub stars.

  • flowbite

    Open-source UI component library and front-end development framework based on Tailwind CSS

  • FlowBite is a modular CSS component library for faster and easier web development. It provides a solid foundation for your project with a responsive grid, consistent typography, customizable components, and extensible architecture. It is an open source library, so you can customize it to suit your specific requirements. It provides over 450+ UI components (such as buttons and forms), sections (such as headers, footers, navbars), and pages built with the utility classes from Tailwind CSS – all designed using Figma's iconic user interface design software. The number of components Flowbite offers developers makes it easy to build complex, fast-loading web applications and sites.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • Material UI

    Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

  • Material UI has been around since 2014 when Google first released it, but only recently did it become a full-fledged design system with the addition of its own CSS library. The original Material UI was just a set of guidelines for designers who wanted to use Google's design language in their projects. It didn't offer any code or tools that could be used to build sites or apps with it. To date, it has been downloaded over (npm) 295 million times and it has around 81,000+ GitHub stars.

  • Sass

    Sass makes CSS fun!

  • Foundation is a family of responsive front-end frameworks. It is built with SASS, a CSS preprocessor, and is maintained by ZURB, a design and development agency. The framework is known for its grid system and its mobile-first approach to building layouts.

  • material-ui-docs

    ⚠️ Please don't submit PRs here as they will be closed. To edit the docs or source code, please use the main repository:

  • Material UI is a free, open source set of CSS modules and components that you can use to build websites in the Google material design style. It is built on top of the popular Bootstrap framework and adds new components and CSS classes. It provides a set of components that can be used to build web applications, websites, apps, and more.

  • jQuery

    jQuery JavaScript Library

  • Semantic UI is a framework for developing beautiful, responsive, and intuitive web applications. It provides a collection of pre-built UI components that can be used in any web project. It's built on top of vanilla CSS and jquery, which provides a clean and consistent foundation for your application.

  • Bootstrap

    The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

  • Bootstrap is a free and open source front-end web design framework for crafting beautiful web applications. It contains templates for interface components such as typography, forms, and buttonsnavigation—and it also includes optional JavaScript extensions. Unlike many other frameworks, it concerns itself with front-end development for developing responsive, mobile-first projects on the web.

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

  • Resources for learning how to design a beautiful Shopify store?

    5 projects | /r/shopify | 17 Jun 2021
  • I hate CSS: how can I build UIs?

    13 projects | news.ycombinator.com | 5 Nov 2023
  • Learning HTML, CSS and Javascript

    3 projects | /r/learnprogramming | 1 Feb 2023
  • 8 CSS Frameworks to create wonderful websites.

    7 projects | dev.to | 18 Dec 2022
  • React, AntD and Tailwind: fix CSS conflicts

    2 projects | dev.to | 2 Jul 2022