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

1. open-ui

   1 4 4,266 9.0 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.

2. SurveyJS

   surveyjs.io featured

   JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.

   

3. shadcn/ui

   2 311 86,928 9.7 TypeScript

   A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

   

   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.

4. Tailwind CSS

   3 1,505 87,781 9.9 TypeScript

   A utility-first CSS framework for rapid UI development.

   

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

5. pico

   4 91 14,846 7.9 CSS

   Minimal CSS Framework for semantic HTML

   

   A single CSS file (Pico)

6. open-props

   5 57 5,037 7.4 HTML

   CSS custom properties to help accelerate adaptive and consistent design.

   

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

7. material-web

   6 17 9,897 8.4 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.

8. WHATWG HTML Standard

   7 168 8,542 9.4 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.

9. InfluxDB

   www.influxdata.com featured

   InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

   

10. headlessui

    8 200 27,323 8.7 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.

11. Bootstrap

    9 587 172,323 9.5 MDX

    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