20 Open-source and Free React UI Components Libraries

20 Open-source and Free React UI Components Libraries
Photo by Markus Spiske / Unsplash

React is an open-source JavaScript framework that is popular for building comprehensive and fully functional web applications. It is easy to use, reliable, and flexible, and has a vast community of developers. React has a thriving ecosystem of libraries, frameworks, tutorials, and open-source projects. It is the preferred choice for developers looking to build robust and feature-packed applications that can run seamlessly across multiple platforms.

React UI user-interface component libraries are collections of pre-designed, ready-to-use components that make it easier and faster for developers to create user-friendly interfaces without building everything from scratch. These collections can include everything from basic buttons and form elements to complex data visualization tools and interactive widgets.

28 Next.js Free Open Source Boilerplate, Dashboards, Templates, and Starters
Next.js is an open-source web framework for React. It offers an easy workflow to build reactive scalable enterprise-grade apps. Next.js can also be used to to build desktop apps with Electron and Tauri (Rust), as well as mobile apps with Electron. Because Next.js has a vast wide

In this post, we present a comprehensive collection of the most popular and feature-rich open-source and free UI components libraries for React. Whether you're a beginner or an experienced developer, these libraries will help boost your productivity and streamline your workflow so you can focus on building the best possible user experiences for your applications.

1- Monday: Vibe Design System

Monday is a free open-source (MIT licensed) rich components' library for React. It includes all the basic UI components such as buttons, button groups, colors, form elements, accordions, dialogs, tooltips, and more. Moreover, Monday also supports Motion animation by default, and external fonts.

Here is a special Monday.com Promo Code.

GitHub - mondaycom/monday-ui-react-core: Official monday.com UI resources for application development in React.js
Official monday.com UI resources for application development in React.js - GitHub - mondaycom/monday-ui-react-core: Official monday.com UI resources for application development in React.js
$25 Off Monday.com Coupon Code In January 2024
$25 Off Monday.com Coupon Code In January 2024

2- CoreUI

CoreUI React.js UI Components. CoreUI for React.js replaces and extends the Bootstrap JavaScript. Components have been built from scratch as true React.js hook components, without jQuery and unneeded dependencies.

GitHub - coreui/coreui-react: CoreUI React.js UI Components. CoreUI for React.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true React.js hook components, without jQuery and unneeded dependencies.
CoreUI React.js UI Components. CoreUI for React.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true React.js hook components, without jQuery and unneed…

3- TDesign

TDesign React is a UI component library for React 16.x and desktop application. It works well for other frameworks like Electron. It also comes with many desktop application interactions APIs. However, the English documentation is not final yet.

GitHub - Tencent/tdesign-react: A React UI components lib for TDesign.
A React UI components lib for TDesign. Contribute to Tencent/tdesign-react development by creating an account on GitHub.

4- Fluent UI

Fluent UI web represents a collection of utilities, React components, and web components for building web applications. It is totally a free to use and open-source that is licensed under the MIT license.

GitHub - microsoft/fluentui: Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
Fluent UI web represents a collection of utilities, React components, and web components for building web applications. - GitHub - microsoft/fluentui: Fluent UI web represents a collection of utili…

5- React UI

This project is a collection of UI components build to create a production grade front-end experience with react & Next.js.

GitHub - storyofams/react-ui: Collection of UI components build to create a production grade front-end experience with React & Next.js
Collection of UI components build to create a production grade front-end experience with React & Next.js - GitHub - storyofams/react-ui: Collection of UI components build to create a production…

6- PrimeReact

PrimeReact is a rich set of open source UI Components for React. It is an ideal option for creating rich apps, dashboards, and admin panels.

GitHub - primefaces/primereact: The Most Complete React UI Component Library
The Most Complete React UI Component Library. Contribute to primefaces/primereact development by creating an account on GitHub.

7- Chakra UI

Chakra UI is a comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a diverse range of components that can be easily combined to build complex user interfaces while adhering to accessibility best practices.

GitHub - chakra-ui/chakra-ui: ⚡️ Simple, Modular & Accessible UI Components for your React Applications
⚡️ Simple, Modular & Accessible UI Components for your React Applications - GitHub - chakra-ui/chakra-ui: ⚡️ Simple, Modular & Accessible UI Components for your React Applications

8- MUI Core and MUI X

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

MUI X is based on Advanced and powerful React components for complex use-cases. It includes data grid, date/ time pickers, an

MUI
Move faster with intuitive React UI tools. Follow your own design system, or start with Material Design (Material UI). - MUI

9- Gestalt

Gestalt is Pinterest’s design system. Our system includes a React component library with comprehensive guidelines, best practices, tools, and resources to support designers and engineers delivering a high-quality product.

GitHub - pinterest/gestalt: A set of React UI components that supports Pinterest’s design language
A set of React UI components that supports Pinterest’s design language - GitHub - pinterest/gestalt: A set of React UI components that supports Pinterest’s design language

10- shadcn/ui

shadcn/ui is a free accessible and customizable components for Next.js apps set that you can copy and paste into your apps. It uses Radix UI, Tailwind CSS, and dark theme support that is compatible with Next-themes.

GitHub - shadcn/ui: Beautifully designed components built with Radix UI and Tailwind CSS.
Beautifully designed components built with Radix UI and Tailwind CSS. - GitHub - shadcn/ui: Beautifully designed components built with Radix UI and Tailwind CSS.

11- UI Box

ui-box is a low level CSS-in-JS solution that focuses on being simple, fast and extensible. All CSS properties are set using simple React props, which allows you to easily create reusable components that can be enhanced with additional CSS properties. This is very useful for adding things like margins to components, which would normally require adding non-reusable wrapper elements/classes.

GitHub - segmentio/ui-box: Blazing Fast React UI Primitive
Blazing Fast React UI Primitive. Contribute to segmentio/ui-box development by creating an account on GitHub.

12- Amplify UI

Amplify UI is an open-source UI library with cloud-connected components that are endlessly customizable, accessible, and can integrate into any application. Amplify UI consists of:

  1. Connected components that simplify complex cloud-connected workflows, like Authenticator.
  2. Primitive components that create consistency across Amplify UI and allow you to build complete applications that fit your brand, like Buttons and Badges.
  3. Data-bound components that make it easy to display dynamic data, like DataStoreCollections.
  4. Theming capabilities that allow you to customize the appearance of Amplify UI to match your brand.
GitHub - aws-amplify/amplify-ui: Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud. - GitHub - aws-amplify/amplify-ui: Amplify UI is a collection of…

13- Mantine

Mantime is a features-rich open-source fully featured React components library.

GitHub - mantinedev/mantine: A fully featured React components library
A fully featured React components library. Contribute to mantinedev/mantine development by creating an account on GitHub.

14- Flowbite-React

Flowbite-React is an open source collection of UI components, built in React, with utility classes from Tailwind CSS that you can use as a starting point for user interfaces and websites.

GitHub - themesberg/flowbite-react: Official React components built for Flowbite and Tailwind CSS
Official React components built for Flowbite and Tailwind CSS - GitHub - themesberg/flowbite-react: Official React components built for Flowbite and Tailwind CSS

15- Grommet

Grommet is a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.

GitHub - grommet/grommet: a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package - GitHub - grommet/grommet: a react-based framework that provides accessibility, modul…

16- Ant Design

Ant Design is an enterprise-class UI design language and React UI library. It supports internationalization and theming out of the box.

GitHub - ant-design/ant-design: An enterprise-class UI design language and React UI library
An enterprise-class UI design language and React UI library - GitHub - ant-design/ant-design: An enterprise-class UI design language and React UI library

17- Rebass

Rebase is a free and open-source (MIT) React primitive UI components built with styled-system.

Rebass features include:

  • Start your design system without boiling the ocean
  • Build consistent UI with design constraints and user-defined scales
  • Best-in-class developer ergonomics with Styled System props
  • First-class support for theming & fully compatible with Theme UI
  • Quick, mobile-first responsive styles with array-based syntax
  • Flexbox layout with the Box and Flex components
  • Flexibility built in for high design & development velocity
  • Minimal footprint at about 4 KB
Rebass
React primitive UI components built with Styled System

18- NextUI

NextUI: A Fancy Interface Library for React and Next.js Projects
NextUI is a React-based user-interface library that allows developers to build fancy beautiful websites and applications. It comes packed with dozens of beautiful components such as cards, loading/ spinners, nice themes, dark mode and more. Features 1. Simple installation for React and Next.js…

19- Daisy UI

Daisy UI is a powerful open-source library of Tailwind components featuring 29 themes. It supports Vue, React, Meteor, and Angular, providing developers with more options. Customizing your web applications is easy with Daisy UI's Tailwind configuration file. The library has a variety of stunning and professional themes for different niches and areas of expertise. Utilizing Daisy UI can help you create beautiful and responsive web applications in less time and with less effort, making it an invaluable tool for both experienced professionals and beginners in web development.

daisyUI — Tailwind CSS Components
Tailwind Components Library - Free components for Tailwind CSS

20- gust UI

GitHub - labXD/gustXD: UI React component library using Tailwind CSS
UI React component library using Tailwind CSS. Contribute to labXD/gustXD development by creating an account on GitHub.

15 Open-source Tailwind-based UI Frameworks and Component Libraries
What is Tailwind? Tailwind is a free, open-source utilities-first CSS framework. It was featured in dozens of projects by developers who use different frameworks as Vue, React, Angular, Blaze, Meteor, Svelte, and others. As its popularity is growing, developers start building their own custom libr…
11 Open-source Free TailwindCSS Based UI Plugins and Frameworks
Tailwind is a utility-first CSS framework that helps developers create responsive and scalable user interfaces. It is designed to simplify the process of styling HTML elements by providing pre-defined classes that can be easily applied to the markup. Tailwind’s key advantage is its flexibility. It…
10 Open Source CSS Animation Frameworks
What is a CSS animation? CSS animation allowing you to animate HTML elements using only CSS classes. It does not require JavaScript, nor extensive setup or configuration. CSS animations allow you to create fancy eye-catching websites, parallel sliders, control, animated hover effects, 3D effects,…
13 Open Source Utility-first CSS Frameworks
Nowadays, utility-first CSS framework is trending among frontend developers as they have proven to offer solid workflow and minimal output CSS files. Here, in this article we will list the best functional and utility-first CSS frameworks. Some of them are fairly new and still WIP, others already ha…



Read more

8 طرق لمساعدة كبار السن على إدارة مرض السكري

8 طرق لمساعدة كبار السن على إدارة مرض السكري

إذا كنت من كبار السن أو كنت مسؤولاً عن رعاية أحد كبار السن المصابين بمرض السكري في نيوجيرسي، فقد يكون من الصعب إدارة الحالة بشكل صحيح. لحسن الحظ، هناك العديد من الطرق التي يمكنك من خلالها الحصول على المساعدة والدعم. 1- قم بإجراء تغييرات غذائية إن تناول نظام غذائي متوازن

By Hazem Abbas
10 نصائح لإدارة مرض السكري لكبار السن

10 نصائح لإدارة مرض السكري لكبار السن

كبار السن لديهم خطر أكبر للإصابة بمضاعفات مرض السكري. تشير تقارير الجمعية الأمريكية للسكري إلى أن واحدا من كل أربعة أشخاص يبلغون من العمر 65 عاما أو أكثر مصابون بمرض السكري من النوع الأول أو النوع الثاني مقارنة بمن تقل أعمارهم عن 65 عاما. ومن ناحية أخرى، قد تشكل إدارة

By Hazem Abbas
10 فوائد للبرمجة للأطفال: لماذا نتعلم البرمجة في سن مبكرة؟

10 فوائد للبرمجة للأطفال: لماذا نتعلم البرمجة في سن مبكرة؟

البرمجة هي نشاط ممتع متعدد التخصصات يشرك العقل ويحمل الكثير من الفوائد الضخمة للأطفال. على سبيل المثال، هل تعلم أنه يدعم إبداعهم وتفكيرهم المنطقي بالإضافة إلى قدرتهم على التركيز؟ فيما يلي قائمتنا المختصرة التي تضم أهم 10 فوائد للبرمجة للأطفال، بناءً على تجربتنا التجريبية والنتائج العلمية المتاحة. في جميع أنحاء

By Hazem Abbas



Open-source Apps

9,500+

Medical Apps

500+

Lists

450+

Dev. Resources

900+