What is a component library and should you build your own?

• open-ui

  2 3,536 8.9 MDX

  Maintain an open standard for UI and promote its adherence and adoption.

  

  There are discussions going on within the Open UI to see how this could start taking shape within the next few years.

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

• shadcn/ui

  230 71,169 9.2 TypeScript

  Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

  

  Some developers might want the best of both worlds. They might want a component built by a trusted third-party library, while also having full control over the markup, styles, and functionality. Libraries like ShadCN allow for this kind of work flow, by allowing developers to copy and paste the component definition into their own projects, effectively letting them own the component.

• Tailwind CSS

  1,389 82,401 9.7 TypeScript

  A utility-first CSS framework for rapid UI development.

  

  A toolchain to generate CSS classes based on your configuration (Tailwind)

• pico

  78 13,582 8.7 CSS

  Minimal CSS Framework for semantic HTML

  

  A single CSS file (Pico)

• open-props

  52 4,719 7.8 HTML

  CSS custom properties to help accelerate adaptive and consistent design.

  Dozens of other tools, like Open Props, fit somewhere in between.

• material-web

  14 9,243 9.3 TypeScript

  Material Design Web Components

  

  For instance, Google’s Material Web is a web component implementation of Material Design. Base Web and Lightning Web Components are also open source too.

• WHATWG HTML Standard

  144 8,071 9.3 HTML

  HTML Standard

  

  Importantly, you’ll learn more about the web by doing so. If it’s your first time building a component library, it can be an opportunity to dive deeper into the HTML browser specs, or brush up on your web accessibility knowledge. This will improve your abilities as a web developer, which will serve you well in any frontend project in the future. It could even help you land your next job.

• headlessui

  191 25,882 9.3 TypeScript

  Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

  

  Other examples of component libraries like this are Lion and HeadlessUI.

• Bootstrap

  565 170,430 9.5 JavaScript

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

  

  For me, Bootstrap is the first that comes to mind. Back in the day, if you wanted to give your site a quick lick of paint, you’d drop the CDN link to the bootstrap CSS file and immediately get that Bootstrap look. It was everywhere in the mid-2010s.

Suggest a related project