Design System Resources

Explore 30 popular design systems to inspire your own design system development

Material Design

Google

A design system by Google that helps teams build high-quality digital experiences for Android, iOS, Flutter, and the web.

web
android
ios
flutter
Components
60
Dark Mode
Accessibility
high
Customization
medium
Documentation
high
tech
GitHub

Carbon Design System

IBM

IBM's open-source design system for products and digital experiences with the goal of creating consistent and engaging user experiences.

web
react
angular
vue
svelte
Components
50
Dark Mode
Accessibility
high
Customization
high
Documentation
high
tech
GitHub

Fluent UI

Microsoft

Microsoft's collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.

web
react
windows
cross-platform
Components
70
Dark Mode
Accessibility
high
Customization
medium
Documentation
high
tech
GitHub

Polaris

Shopify

Shopify's design system to help build better experiences for their merchants with actionable guidelines and components.

web
react
ecommerce
Components
45
Dark Mode
Accessibility
high
Customization
medium
Documentation
high
tech
GitHub

Chakra UI

Community

A simple, modular and accessible component library that gives you the building blocks to build React applications with speed.

react
accessible
themeable
Components
60
Dark Mode
Accessibility
high
Customization
high
Documentation
high
open-source
GitHub

Ant Design

Ant Group

A design system for enterprise-level products. Create an efficient and enjoyable work experience.

react
enterprise
internationalization
Components
80
Dark Mode
Accessibility
medium
Customization
high
Documentation
high
open-source
GitHub

Lightning Design System

Salesforce

The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles.

web
enterprise
crm
Components
90
Dark Mode
Accessibility
high
Customization
medium
Documentation
high
enterprise
GitHub

Atlassian Design System

Atlassian

Atlassian's official design system for creating products that millions of people use every day.

react
enterprise
collaboration
Components
65
Dark Mode
Accessibility
high
Customization
medium
Documentation
high
enterprise
GitHub

MUI (Material-UI)

Community

React components for faster and easier web development, based on Material Design.

react
material design
customizable
Components
70
Dark Mode
Accessibility
high
Customization
high
Documentation
high
open-source
GitHub

Primer

GitHub

GitHub's design system that powers GitHub's front-end design.

web
css
react
Components
40
Dark Mode
Accessibility
high
Customization
medium
Documentation
high
tech
GitHub

Garden

Zendesk

Zendesk's design system for creating consistent and coherent experiences across Zendesk products.

react
customer service
enterprise
Components
50
Dark Mode
Accessibility
high
Customization
medium
Documentation
high
enterprise
GitHub

Spectrum

Adobe

Adobe's design system that provides components and tools to help product teams work more efficiently and to make Adobe's applications more cohesive.

react
creative
accessible
Components
55
Dark Mode
Accessibility
high
Customization
medium
Documentation
high
tech
GitHub

Base Web

Uber

A React Component library implementing the Base design language from Uber.

react
typescript
customizable
Components
45
Dark Mode
Accessibility
high
Customization
high
Documentation
high
tech
GitHub

Tailwind UI

Tailwind Labs

Beautiful UI components built with Tailwind CSS, designed to integrate seamlessly with your Tailwind projects.

tailwind
utility-first
responsive
Components
500
Dark Mode
Accessibility
medium
Customization
high
Documentation
medium
framework

Bootstrap

Bootstrap Team

The world's most popular framework for building responsive, mobile-first sites with HTML, CSS, and JavaScript.

css
responsive
mobile-first
Components
40
Dark Mode
Accessibility
medium
Customization
medium
Documentation
high
framework
GitHub

Bulma

Community

A free, open source CSS framework based on Flexbox and built with Sass.

css
flexbox
responsive
Components
30
Dark Mode
—
Accessibility
medium
Customization
medium
Documentation
high
framework
GitHub

shadcn/ui

Community

Beautifully designed components built with Radix UI and Tailwind CSS that you can copy and paste into your apps.

react
tailwind
radix
Components
35
Dark Mode
Accessibility
high
Customization
high
Documentation
high
open-source
GitHub

Mantine

Community

A fully featured React components library with 100+ customizable components and hooks.

react
typescript
hooks
Components
100
Dark Mode
Accessibility
high
Customization
high
Documentation
high
open-source
GitHub

Radix UI

WorkOS

Unstyled, accessible components for building high-quality design systems and web apps in React.

react
accessible
headless
Components
30
Dark Mode
Accessibility
high
Customization
high
Documentation
high
open-source
GitHub

Semantic UI

Community

A UI component framework based around useful principles from natural language.

css
jquery
theming
Components
50
Dark Mode
—
Accessibility
medium
Customization
medium
Documentation
medium
framework
GitHub

Foundation

ZURB

A responsive front-end framework that makes it easy to design beautiful responsive websites, apps and emails.

css
responsive
email
Components
40
Dark Mode
—
Accessibility
medium
Customization
medium
Documentation
medium
framework
GitHub

Evergreen

Segment

A React UI Framework for building ambitious products on the web, designed by Segment.

react
enterprise
data
Components
30
Dark Mode
—
Accessibility
medium
Customization
medium
Documentation
medium
tech
GitHub

Gestalt

Pinterest

A set of React UI components that supports Pinterest's design language.

react
social
visual
Components
25
Dark Mode
Accessibility
high
Customization
medium
Documentation
high
tech
GitHub

PrimeReact

PrimeTek

A rich set of open source UI Components for React.

react
enterprise
datatable
Components
90
Dark Mode
Accessibility
medium
Customization
high
Documentation
high
open-source
GitHub

Grommet

HPE

A react-based framework that provides accessibility, modularity, responsiveness, and theming.

react
enterprise
accessible
Components
60
Dark Mode
Accessibility
high
Customization
high
Documentation
high
enterprise
GitHub

Tailwind CSS

Tailwind Labs

A utility-first CSS framework for rapidly building custom user interfaces.

css
utility-first
customizable
Components
0
Dark Mode
Accessibility
medium
Customization
high
Documentation
high
framework
GitHub

Vuetify

Community

A Vue UI Library with beautifully handcrafted Material Components.

vue
material design
responsive
Components
80
Dark Mode
Accessibility
medium
Customization
high
Documentation
high
open-source
GitHub

Quasar Framework

Community

A Vue.js based framework that helps developers build high-performance VueJS user interfaces.

vue
mobile
electron
pwa
Components
120
Dark Mode
Accessibility
medium
Customization
high
Documentation
high
open-source
GitHub

Storybook

Community

An open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

development
documentation
testing
Components
0
Dark Mode
Accessibility
high
Customization
high
Documentation
high
open-source
GitHub

Ariakit

Community

Toolkit for building accessible web apps with React. Formerly known as Reakit.

react
accessibility
headless
Components
30
Dark Mode
Accessibility
high
Customization
high
Documentation
high
open-source
GitHub