An Overview of 25+ UI Component Libraries in 2023

1

Vuetify

Vuetify: Claims to be a no design skills required Open Source UI Library with beautifully handcrafted Vue Components. It has all the bells and whistles like most fully-fledged component libraries. Once more, you’d need to know the API to use this library, as well as get “locked in” to their component composition model.

#Developer Tools #Design Tools #UI Design 35 social mentions

2

Tailwind UI

Style systems: such as, TailwindUI, DaisyUI, for a baked-in look and behavior that is up to the developer.

#Design Tools #UI Design #Components Library 207 social mentions

3

Tailwind CSS

Extensions of CSS: for example, Sass, Less, Tailwind, CSS Modules, to make stuff look a certain way on your own.

#Developer Tools #Design Tools #Website Design 867 social mentions

4

styled-components

As such, a new breed of solution was born — CSS in JS. Mostly prevalent in the React ecosystem, libraries such as Styled Components and Emotion allowed scoping styles to components and in so, got rid of the cascade problem.

#Developer Tools #Design Tools #Javascript UI Libraries 154 social mentions

5

Shoelace.css

Shoelace: Being built with web components means this library is framework agnostic, however, React is the only framework that was entitled to get first-class support. It also has built-in localization, and the components were built with Lit. Keep in mind that if you want the get your component content in SSR, this might not fit your needs.

#Developer Tools #Design Tools #Gradient Generator 17 social mentions

6

Sass

Extensions of CSS: for example, Sass, Less, Tailwind, CSS Modules, to make stuff look a certain way on your own.

#Developer Tools #Design Tools #Javascript UI Libraries 131 social mentions

7

NextUI

NextUI: Not to be confused with the React meta-framework, Next.js, this library is built on top of Tailwind CSS, and claims to have a minimal learning curve. Themes are handled by your tailwind.config.js file, a11y out of the box, and there’s dark theme support for all components. Overriding styles is done just by putting in different Tailwind class names.

#Design Tools #Open Source #User Experience 19 social mentions

8

Next.js

NextUI: Not to be confused with the React meta-framework, Next.js, this library is built on top of Tailwind CSS, and claims to have a minimal learning curve. Themes are handled by your tailwind.config.js file, a11y out of the box, and there’s dark theme support for all components. Overriding styles is done just by putting in different Tailwind class names.

#Developer Tools #Web Frameworks #JavaScript Framework 919 social mentions

9

NativeBase

KumaUI : Another relatively new contender, Kuma uses zero runtime CSS-in-JS to create headless UI components which allows a lot of flexibility. It was heavily inspired by other zero runtime CSS-in-JS solutions such as PandaCSS, Vanilla Extract, and Linaria, as well as by Styled System, ChakraUI, and Native Base. ### Vue.

#Development Tools #JavaScript Framework #React Native 22 social mentions

10

React Admin

React-Admin: As the name suggests, this component library is targeted at building administrator interfaces for B2B (business-to-business), for example, managing users in your system. It is based on Material design and has a neat feature where you can let it “guess” your list views by providing a sample API endpoint for your data.

#Design Tools #Open Source #Developer Tools 21 social mentions

11

Mantine

Mantine : Another fully featured component library with baked in a11y, more than 100 components, and hooks. Mantine is all TypeScript-based and has a way to override default styling. Once more, there’s a lot to learn on how to use its functions and API to achieve your goals.

#Open Source #ReactJS #UI 114 social mentions

12

SvelteKit

Svelte Headless UI : A complete port of React Headless UI, which is compatible with SvelteKit (Svelte meta framework). See above for more details.

#Application And Data #Languages & Frameworks #Frameworks (Full Stack) 82 social mentions

13

Headless UI

HeadlessUI : The library is only the headless part or behaviors you need to build accessible components. It is specifically designed to integrate with Tailwind, but you could use any CSS solution you like.

#Design Tools #UI Design #Components Library 28 social mentions

14

Foundation

Just when we thought we'd seen it all, giants like Twitter Bootstrap, Foundation, and Bulma entered the scene. They made development quick and ensured consistent styling, but the flip side? Websites began feeling a bit too...uniform.

#CSS Framework #Design Tools #Development Tools 18 social mentions

15

BEM

Recognizing this, the community pivoted, introducing methodologies like BEM to inject some uniqueness and modular style.

#Developer Tools #Design Tools #CSS Framework 43 social mentions

16

DaisyUI

Style systems: such as, TailwindUI, DaisyUI, for a baked-in look and behavior that is up to the developer.

#Design Tools #User Experience #Developer Tools 137 social mentions

17

Chakra UI

ChakraUI: An emphasis on A11y, meaning it is fully compatible with the WAI-ARIA accessibility standard, has won OSS awards, and has a thriving community. As mentioned, it’s one of the better choices out there as it has a great model for building composable UI, built-in hooks, and great dark-mode support. This is the same team behind Zag.js, which handles UI as state machines. Once again, you’d need to learn the API, and swapping might be hard to do.

#Design Tools #Developer Tools #UI 197 social mentions

18

Bulma

Just when we thought we'd seen it all, giants like Twitter Bootstrap, Foundation, and Bulma entered the scene. They made development quick and ensured consistent styling, but the flip side? Websites began feeling a bit too...uniform.

#CSS Framework #Development Tools #Design Tools 109 social mentions

19

Builder.io

 Design with fewer limitations, using Builder.io.

#Website Builder #Website Design #Web Development Tools 36 social mentions

20

Blueprint

Blueprint : A collection of components for building data-intensive interfaces for desktops. It specifically states that it is not designed to work for mobile. It is most likely better for building internal tools, dashboards, and Electron apps. Blueprint is one of the few libs in this list that has a Date Picker component.

#Developer Tools #Development Tools #Design Tools 16 social mentions

21

Ant Design

Ant Design: A solid option that is been used by a lot of heavy hitters, such as Tencent, Baidu, AliBaba, and more. Supports all modern browsers, SSR, esm, and even Electron. Has also community implementations for Angular, Vue, and more. Does use CSS-in-JS, so expect runtime overhead as well as AntD ways of doing things.

#Development Tools #Design Tools #UI 96 social mentions

22

960 Grid System

Back in the day, web designers were hand-writing CSS, which, trust me, was a journey full of twists (for more on this, see CSS The Good Parts). Then the 2000s hit, bringing with them CSS frameworks like Blueprint, 960 Grid System, YUI Grids, and YAML (probably not the YAML you’re thinking of). These frameworks introduced responsive grids and clean UI elements, changing the game.

#CSS Framework #Development Tools #Design Tools 2 social mentions