Open source design systems for modern products

Explore open source design systems and component libraries for modern teams. Find reusable UI patterns, tokens, and documentation resources.

Why this page exists

This collection focuses on open source design systems and UI libraries. Use it to evaluate implementation style, accessibility support, and community-maintained components.

Enterprise design systems to benchmark

Discover enterprise design systems from leading brands. Compare patterns, governance approaches, and UI foundations used in large product teams.

Figma-focused design systems and UI references

Find Figma-friendly design systems with strong docs and component guidance. Great for design workflow consistency and faster design-to-dev handoff.

React design systems for production UI

Browse React-based design systems and component libraries to speed up UI development. Compare APIs, patterns, and production-ready design foundations.

Matching design systems

We categorize systems by title, description, and source metadata to help you find relevant references faster.

Ant Design - The world's second most popular React UI framework favicon

Ant Design - The world's second most popular React UI framework

An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises

View details Visit site

Orbit design system

An open source design system for your next travel project.

View details Visit site

PatternFly is Red Hat's open source design system. It consists of components, documentation, and code for building enterprise applications at scale.

View details Visit site

Paste: The Design System for building Twilio customer experiences

Paste is the design system for designing and building consistent experiences at Twilio. It is made up of tokens and components, along with in-depth documentation to assist designers and developers faced with solving our customers’ problems. It is open source and contributions are welcome.

View details Visit site

Biings Design System

A series of assets and guidelines for building consistent user experiences across Biings products.

View details Visit site

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

View details Visit site

Fluent 2 Design System

Explore the next evolution of Microsoft’s design system, enabling more seamless collaboration and creativity than ever. Move fluidly from design to development, between apps, and across platforms.

View details Visit site

Carbon Design System

Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

View details Visit site

Tailwind CSS Components - Tailwind Plus

Beautiful UI components and templates by the creators of Tailwind CSS.

View details Visit site

Components, icons, and colors for building high‑quality, accessible UI. Free and open-source.

View details Visit site

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

View details Visit site

Introduction — Wedges | Lemon Squeezy

An ever-expanding, open-source React UI library built with the Wedges Design System, Radix primitives, and Tailwind CSS.

View details Visit site

Build your component library - shadcn/ui

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

View details Visit site

Flowbite - Tailwind CSS component library

Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS

View details Visit site

Preline UI - Tailwind CSS component library

Quickly set up Preline UI Tailwind CSS library for your project. Browse Tailwind components and UI elements such as buttons, grids, tables, and more.

View details Visit site

Install a free Tailwind CSS components library

Install TW elements via npm, via command line, via CDN or download a free .zip package. Use our open source Tailwind CSS components for free.

View details Visit site

Design System - App Design and UX guidelines to build top mobile apps

Our Design System compiles the UX and App Design guidelines used to build your apps through our app builder to achieve visual consistency across all platforms.

View details Visit site

Getting Started | NativeBase | Universal Components for React and React Native

NativeBase 3.0 lets you build consistently across android, iOS & web. It is inspired by the Styled System and is accessible, highly themeable, and responsive.

View details Visit site

Skyline, Benevity's Design System.

Skyline is Benevity's design system. It helps create a familiar and positive experience across all our products.

View details Visit site

GitHub - dynatrace-oss/barista: Barista - the Dynatrace design system. Tailored to scale.

Barista - the Dynatrace design system. Tailored to scale. - dynatrace-oss/barista

View details Visit site

daisyUI — Tailwind CSS Components ( version 5 update is here )

Best Tailwind Components Library - Free UI components for Tailwind CSS

View details Visit site

Next step

Continue exploring related references, or open the Figma plugin to use this directory in your workflow.

Back to design system hub Explore all tools Install Design System Hub for Figma

More tools from Learn & References.

View all Learn & References