81 free design systems
Open Source Design Systems
Open-source design systems with tokens, components and documentation that teams use to build consistent products. appsgit lists 81 design systems; the most starred are React Spectrum, Primer CSS and HyperUI.
Updated Oct 8, 2026
Open Source Design Systems
React Spectrum
adobe/react-spectrum
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
OfficialDesign systemsTypeScriptPrimer CSS
primer/css
Primer is GitHub's design system. This is the CSS implementation.
Design systemsSCSSHyperUI
markmead/hyperui
Free Tailwind CSS v4 components for your next project, designed to enhance your web development with the latest features and styles.
Design systemsAstroMaterial Web
material-components/material-web
Material Design Web Components.
Design systemsSCSSCarbon
carbon-design-system/carbon
Website · Design · Develop · Contribute · Migrate Carbon is IBM's open-source design system for products and experiences.
Design systemsTypeScriptGrommet
grommet/grommet
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.
Design systemsJavaScriptSkeleton
skeletonlabs/skeleton
Skeleton is an adaptive design system powered by Tailwind CSS.
Design systemsTypeScriptArco Design
arco-design/arco-design
A comprehensive React UI components library based on Arco Design.
Design systemsTypeScriptArk
chakra-ui/ark
Unstyled, accessible UI components for your design System.
OfficialDesign systemsTypeScriptZag
chakra-ui/zag
Build your design system in React, Solid, Vue, Svelte or Vanilla.
OfficialDesign systemsTypeScriptGestalt
pinterest/gestalt
A set of React UI components that supports Pinterest’s design language.
OfficialDesign systemsTypeScriptReact
primer/react
An implementation of GitHub's Primer Design System using React.
Design systemsTypeScriptArco Design Vue
arco-design/arco-design-vue
A Vue.js 3 UI Library based on Arco Design.
Design systemsTypeScriptCarbon Components Svelte
carbon-design-system/carbon-components-svelte
Svelte implementation of the Carbon Design System.
Design systemsTypeScriptVuesion
vuesion/vuesion
Vuesion is a boilerplate that empowers product teams to build faster with modern best practices across engineering and design.
Design systemsVueDesigner Skills
Owl-Listener/designer-skills
Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.
Design systemsMarkdownCloudscape Design Components
cloudscape-design/components
React components for Cloudscape Design System.
Design systemsTypeScriptBeercss
beercss/beercss
Build material design interfaces in record time...
Design systemsVueLearnstorybook.com
chromaui/learnstorybook.com
Static site and content for Storybook tutorials.
OfficialDesign systemsJavaScriptReshaped
reshaped-ui/reshaped
Reshaped provides accessible React and Figma components for building beautiful products or starting your own design system.
Design systemsTypeScriptReact
untitleduico/react
Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria.
Design systemsTypeScriptDesign Dna
zanwei/design-dna
Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.
Design systemsJavaScriptKobalte
kobaltedev/kobalte
A UI toolkit for building accessible web apps and design systems with SolidJS.
Design systemsTypeScriptBraid Design System
seek-oss/braid-design-system
Themeable design system for the SEEK Group.
Design systemsTypeScriptWww Sacred
internet-development/www-sacred
SRCL is an open-source React component and style repository that helps you build web applications, desktop applications, and static websites with terminal aesthetics.
Design systemsTypeScriptUX UI Agent Skills
plugin87/ux-ui-agent-skills
Turn Claude into a senior design architect: DTCG tokens, 52 components, WCAG 2.2 AA-AAA, 138 design systems, any-framework code, and 50 objective gates that fail the build instead of faking success.
Design systemsJavaScriptCommunity Platform
ONEARMY/community-platform
A platform to build useful communities that aim to tackle global problems.
Design systemsTypeScriptBaklava
Trendyol/baklava
Baklava is a design system provided by Trendyol to create a consistent UI/UX for app users.
OfficialDesign systemsTypeScriptdotUI
mehdibha/dotUI
dotUI Studio — build your design system, then own it as code.
Design systemsTypeScriptSeed Design
daangn/seed-design
SEED Design System SEED는 당근 제품을 위한 통합된 디자인 언어입니다.
Design systemsTypeScriptAmplify UI
aws-amplify/amplify-ui
Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
Design systemsTypeScriptLayer5
layer5io/layer5
Layer5, expect more from your infrastructure.
OfficialDesign systemsJavaScriptRadix UI Website
radix-ui/website
Website and documentation for Radix.
OfficialDesign systemsTypeScriptCircuit UI
sumup-oss/circuit-ui
SumUp's design system for the web.
Design systemsTypeScriptAccessible Autocomplete
alphagov/accessible-autocomplete
An autocomplete component, built to be accessible.
Design systemsJavaScriptCodex Slides
nexu-io/codex-slides
Open-source AI slide studio inside Codex: image-native decks, every slide a full visual canvas.
Design systemsTypeScriptHiui
XiaoMi/hiui
HIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend.
Design systemsTypeScriptPatternfly React
patternfly/patternfly-react
A set of React components for the PatternFly project.
Design systemsTypeScriptHue
dominikmartn/hue
open-source skill that learns any brand and turns it into a complete design system.
Design systemsJavaScriptNext.js Starter
once-ui-system/nextjs-starter
A simple Once UI setup for a new project.
Design systemsTypeScriptMix
btwld/mix
Mix is a styling system for Flutter that separates style definitions from widget structure.
Design systemsDartOrbit
zumerlab/orbit
Orbit is a framework designed for building any kind of radial UI.
Design systemsJavaScriptDesign System
priceline/design-system
If you'd like to contribute to the Design System, we'd love to have your help.
Design systemsTypeScriptWelcome UI
WTTJ/welcome-ui
Customizable design system from Welcome to the jungle (@wttj) with react, typescript, tailwindcss, ariakit and a lot of love Here you'll find all the core components you need to create a delightful…
Design systemsTypeScriptTinte
Railly/tinte
Compile your design system into an Agent Plugin.
Design systemsTypeScriptBoardui
BoardUI/boardui
React design system for agentic interfaces.
Design systemsTypeScriptAmbientcss
kikkupico/ambientcss
A physics-based lighting system for CSS. Define a light source, and every shadow, highlight and surface gradient follows from it — calibrated against Blender raytraces.
Design systemsTypeScriptView Components
primer/view_components
ViewComponents for the Primer Design System.
Design systemsRuby
Showing the top 48 of 81 by GitHub stars. Every entry is listed in the sitemap and the JSON API.
What are the best free design systems?
By GitHub stars, React Spectrum is the most popular (15,920 stars), followed by Primer CSS and HyperUI. Each page lists the tech stack, license, last commit and a live demo when the project has one.
Are these design systems free for commercial use?
It depends on the license shown on each card and page. Permissive licenses such as MIT, Apache-2.0, BSD and ISC allow commercial use as long as you keep the copyright notice; CC-BY licenses need visible attribution; GPL and AGPL licenses require you to share your changes under the same license. Check the license before you ship a client project. Here, 79 of the 81 listed use a permissive license (MIT, Apache-2.0, BSD, ISC or similar).
How do I use a GitHub template repository?
When a repository is marked as a template, GitHub shows a Use this template button: it creates a new repository in your account with the same files and a fresh commit history. Pages on appsgit link that button directly when it is available. For any other repository, fork it or copy the files. degit copies the latest files of a GitHub repository into a new folder without its git history, so you start with a clean project: npx degit owner/repo my-site. It is faster than git clone and needs only Node.js. Every template page on appsgit shows the exact command. Source: docs.github.com, github.com
How are these design systems chosen?
Templates come from more than 50 GitHub topics such as landing-page-template, html-template, shadcn-ui, admin-dashboard, saas-boilerplate, nextjs-template, hugo-theme, jekyll-theme, react-email and flutter-template. A repository is listed only if it has 200+ stars, a license GitHub recognises, a README and a commit in the last six months, and is not archived or a fork. Repositories found only through broad topics (for example shadcn or landing-page) must also describe themselves as a template, starter, theme, kit or component library.