Topics / #design-system

Design-system projects on GitHub

Codified design languages: tokens, components, and usage guidelines.

As of , the most-starred Design-system projects on GitHub are system-design-primer (374.6K stars), ui-ux-pro-max-skill (137.2K stars) and ui (125.8K stars). GitHub.Locker tracks 91 Design-system repositories with 2.4M stars combined. The fastest-growing on October 17 was taste-skill, with +433 stars in a day.

91Projects
2.4MStars in total
+2.9KStars in a day
Browse in the catalog →github.com/topics/design-system ↗

Hot right now

Most stars gained in a day · Oct 17

+433

taste-skill

Leonxlnx/taste-skill · ★ 98.8K

Taste Skill is a set of portable skills for AI coding agents: they upgrade AI-built interfaces with stronger layout, typography, motion, and spacing instead of boilerplate-looking UIs.

+379

skills

emilkowalski/skills · ★ 47K

A collection of AI agent skills for designers and engineers that teach coding agents good judgment about animation and UI design, drawn from the author's experience at Vercel and Linear.

+346

impeccable

pbakaus/impeccable · ★ 82.5K

Impeccable is a design language for AI coding agents: one skill, 24 commands, live browser iteration, and 59 deterministic detector rules that make AI-generated frontend design better.

+332

ui-ux-pro-max-skill

nextlevelbuilder/ui-ux-pro-max-skill · ★ 137.2K

UI UX Pro Max is an AI skill that gives coding assistants design intelligence — industry-specific style, color, typography and UX reasoning rules — so they can generate professional UI/UX across many frameworks and platforms.

The all-time top

91 projects · by stars

  1. #1 · donnemartin/system-design-primer

    system-design-primer

    A curated, organized collection of resources for learning how to design large-scale systems, built specifically to help engineers prepare for system design interviews.

    374.6K
  2. #2 · nextlevelbuilder/ui-ux-pro-max-skill

    ui-ux-pro-max-skill

    UI UX Pro Max is an AI skill that gives coding assistants design intelligence — industry-specific style, color, typography and UX reasoning rules — so they can generate professional UI/UX across many frameworks and platforms.

    137.2K
  3. #3 · shadcn-ui/ui

    ui

    shadcn/ui is a collection of beautifully designed, accessible React components with thoughtful defaults that you copy into your own codebase instead of installing as a locked dependency, so you can customize and extend them freely.

    125.8K
  1. 4

    awesome-design-md

    122.1KVoltAgent/awesome-design-md

    This is a curated collection of DESIGN.md files — plain-text design system documents analyzed from real websites like Claude, Stripe, Nike and Tesla — that you drop into a project so an AI coding agent generates UI matching that brand's visual language.

  2. 5

    material-ui

    99.2Kmui/material-ui · JavaScript

    Material UI is a comprehensive library of React components implementing Google's Material Design system, used to build web UIs quickly with pre-built buttons, inputs, dialogs, and more.

  3. 6

    taste-skill

    98.8KLeonxlnx/taste-skill · JavaScript

    Taste Skill is a set of portable skills for AI coding agents: they upgrade AI-built interfaces with stronger layout, typography, motion, and spacing instead of boilerplate-looking UIs.

  4. 7

    impeccable

    82.5Kpbakaus/impeccable · Rust

    Impeccable is a design language for AI coding agents: one skill, 24 commands, live browser iteration, and 59 deterministic detector rules that make AI-generated frontend design better.

  5. 8

    penpot

    61.3Kpenpot/penpot · Clojure

    Penpot is an open-source design platform for product teams, letting them design UI, prototype, and build design systems with full self-hosting control instead of relying on a proprietary SaaS tool.

  6. 9

    material-design-icons

    54.1Kgoogle/material-design-icons

    This is Google's official repository of Material Design icons, offering two icon sets: Material Symbols (the current, actively updated set) and Material Icons (the classic set, no longer updated since 2022).

  7. 10

    element

    54KElemeFE/element · Vue

    Element is a Vue.js 2.0 UI toolkit: a library of ready-made interface components you use to build web interfaces.

  8. 11

    skills

    47Kemilkowalski/skills · Markdown

    A collection of AI agent skills for designers and engineers that teach coding agents good judgment about animation and UI design, drawn from the author's experience at Vercel and Linear.

  9. 12

    daisyui

    42.6Ksaadeghi/daisyui · JavaScript

    daisyUI is a free, open-source component library for Tailwind CSS — the most popular one, currently at version 5. It adds ready-made UI component classes on top of Tailwind's utility classes.

  10. 13

    tabler

    41.9Ktabler/tabler · Astro

    Tabler is a free and open source admin dashboard UI kit built on Bootstrap 5: ready-made layouts, components and demo pages for admin panels, dashboards and web apps, in light and dark mode.

  11. 14

    styled-components

    41.1Kstyled-components/styled-components · TypeScript

    A CSS-in-JS library for React: styles are written in JavaScript and turned into styled components, with one API across server components, client components, streaming SSR and React Native.

  12. 15

    vuetify

    41Kvuetifyjs/vuetify · TypeScript

    Vuetify is a UI library of handcrafted Vue components built on Material Design — you assemble your app's interface from ready-made, responsive parts instead of styling everything yourself.

  13. 16

    chakra-ui

    40.7Kchakra-ui/chakra-ui · TypeScript

    Chakra UI is a component system for building SaaS products with speed: a set of accessible React components for creating web apps and design systems.

  14. 17

    ink-kit

    36.3Kinkonchain/ink-kit · TypeScript

    Ink Kit is a React component library for onchain applications. It provided UI components, app layouts and themes, plus a wallet connection component built on wagmi.

  15. 18

    mantine

    31.8Kmantinedev/mantine · TypeScript

    Mantine is a fully featured React components library: @mantine/core alone ships 100+ components, and companion packages cover forms, charts, notifications, editors and more.

  16. 19

    heroui

    31Kheroui-inc/heroui · TypeScript

    HeroUI (formerly NextUI) is a production-ready React component library that combines React Aria's accessibility primitives with Tailwind CSS v4 styling.

  17. 20

    hallmark

    30.3KNutlope/hallmark · CSS

    Hallmark is a design skill for AI coding agents — Claude Code, Cursor, and Codex — that generates web UI built to not look AI-generated. It is made by Together AI.

  18. 21

    yeti

    29.8Kfoundation/yeti · JavaScript

    Yeti is a CSS-first, native, zero-build layout and styling framework for web designers, made by Foundation. It is the successor to Foundation for Sites - version 6 continues on the v6 branch with bug fixes and keeps shipping to npm as foundation-sites 6.x.

  19. 22

    design.md

    28.4Kgoogle-labs-code/design.md · TypeScript

    DESIGN.md is a format specification for describing a visual identity (colors, typography, layout, components) so coding agents have a persistent, structured understanding of a design system.

  20. 23

    weui

    27.4KTencent/weui · HTML

    WeUI is a UI library from WeChat's official design team: it gives mobile web pages the WeChat look-and-feel, with widgets styled like the WeChat app itself.

  21. 24

    onlook

    26.9Konlook-dev/onlook · TypeScript

    Onlook is an open-source, AI-first visual editor for designing on top of your Next.js + Tailwind codebase. You edit elements directly in the browser DOM like a design tool, and the changes map back to real code in real time.

  22. 25

    components

    25Kangular/components · TypeScript

    This is the official Angular team repository for component infrastructure and Material Design UI components for Angular apps, covering npm packages like @angular/material, @angular/cdk, and @angular/aria.

  23. 26

    mdb-ui-kit

    24.2Kmdbootstrap/mdb-ui-kit · SCSS

    MDB UI Kit is a Bootstrap 5 component library styled with Material Design: 700+ UI components — buttons, cards, modals, forms, tabs, carousels — written in plain JavaScript for building website frontends.

  24. 27

    docz

    23.6Kpedronauck/docz · TypeScript

    Docz is a documentation tool: you write MDX files showcasing your code, and it turns them into a live-reloading, production-ready documentation site.

  25. 28

    blueprint

    22.1Kpalantir/blueprint · TypeScript

    Blueprint is Palantir's React-based UI toolkit for the web: a library of ready-made, Sass-styled UI components written in TypeScript and published under the Apache 2.0 license.

  26. 29

    ant-design-vue

    21.7KvueComponent/ant-design-vue · Vue

    An enterprise-class UI component library for Vue, built on the Ant Design design system — one of the most-starred Vue UI kits on GitHub with over 21,000 stars.

  27. 30

    awesome-shadcn-ui

    20.7Kbirobirobiro/awesome-shadcn-ui · TypeScript

    A curated list of awesome things related to shadcn/ui — an index of component libraries, individual components, templates and tools from the shadcn/ui ecosystem.

  28. 31

    NativeBase

    20.4KGeekyAnts/NativeBase · TypeScript

    NativeBase is a mobile-first, accessible component library for React and React Native: nearly 40 UI components that stay consistent across Android, iOS and Web, so you can build one design system for all three.

  29. 32

    fluentui

    20.3Kmicrosoft/fluentui · TypeScript

    Fluent UI web is Microsoft's collection of utilities, React components, and web components for building web applications, and the design system behind Microsoft 365, Office, and Edge.

  30. 33

    gpui-kit

    18.1Klongbridge/gpui-kit · Rust

    GPUI Kit is a Rust framework for building cross-platform desktop apps on top of GPUI (Zed Industries' UI engine), combining a styled component library, a headless behavior layer, and an extension layer that opens the app to JavaScript.

  31. 34

    awesome-design

    17.6Kgztchan/awesome-design

    Awesome Design is a curated list of design resources and tools for UI/UX designers, covering everything from stock photos to prototyping software.

  32. 35

    material-components-android

    17.4Kmaterial-components/material-components-android · Java

    Material Components for Android (MDC-Android) is Google's library of modular, customizable Material Design UI components for building Android apps.

  33. 36

    material-components-web

    17Kmaterial-components/material-components-web · TypeScript

    It's Material Components for the web (MDC Web): modular, customizable Material Design UI components built by a Google team of engineers and UX designers.

  34. 37

    plate

    16.7Kudecode/plate · TypeScript

    Plate is an open-source rich-text editor framework for React: a plugin system on top of Slate, headless Radix-based primitives, ready-made shadcn/ui components, and AI support built in.

  35. 38

    material

    16.4Kangular/material · JavaScript

    AngularJS Material is a UI component library that implements Google's Material Design specification (2014-2017) for AngularJS 1.x single-page apps.

  36. 39

    react-sketchapp

    14.9Kairbnb/react-sketchapp · TypeScript

    react-sketchapp renders React components directly into Sketch documents, letting you build and manage Sketch design-system assets with real React code.

  37. 40

    tamagui

    14.3Ktamagui/tamagui · TypeScript

    Tamagui is a set of TypeScript libraries for styling React apps: a universal style library, an optimizing compiler, and an optional UI kit that let you share UI code across web and React Native.

  38. 41

    shoelace

    13.8Kshoelace-style/shoelace · TypeScript

    Shoelace is a forward-thinking library of web components — ready-made UI building blocks you can drop into any web page or app. The project has since been sunset in favor of its successor, Web Awesome.

  39. 42

    astryx

    13.7Kfacebook/astryx · TypeScript

    Astryx is an open source, agent-ready design system built inside Meta over eight years, offering 150+ accessible React components, brand theming, dark mode, ready-made templates, and a CLI as one cohesive system.

  40. 43

    core

    13.1Kstenciljs/core · TypeScript

    Stencil is a compiler that generates standards-based Web Components using TypeScript and JSX, letting you build a single component library that works natively in React, Angular, Vue, and plain web apps.

  41. 44

    css

    13Kprimer/css · SCSS

    Primer CSS is the stylesheet implementation of GitHub's design system - the open-source @primer/css package behind the look of github.com.

  42. 45

    garden-skills

    13KConardLi/garden-skills · CSS

    Garden Skills is a curated collection of production-ready Agent Skills — installable instruction packs for AI coding agents — covering web design, video-style web presentations, image generation, and knowledge retrieval.

  43. 46

    hyperui

    12.3Kmarkmead/hyperui · Astro

    HyperUI is a free, open-source collection of Tailwind CSS components for marketing sites, web apps, and eCommerce projects, browsable at hyperui.dev.

  44. 47

    coreui-free-bootstrap-admin-template

    12.3Kcoreui/coreui-free-bootstrap-admin-template · HTML

    A free, open-source Bootstrap 5 admin dashboard template built on CoreUI's own hand-crafted UI component library, used as a starting point for building admin panels and dashboards.

  45. 48

    Material

    12KCosmicMind/Material · Swift

    Material is a UI/UX framework for building iOS applications with Google Material Design-inspired components like cards, text fields, navigation drawers, and snackbars.

  46. 49

    react-slick

    11.9Kakiran/react-slick · JavaScript

    react-slick is a carousel component for React, built as a React port of the popular Slick Carousel library.

  47. 50

    98.css

    11.5Kjdan/98.css · CSS

    98.css is a CSS design system that makes semantic HTML look like a Windows 98 interface, letting you build faithful retro-UI recreations.

  48. 51

    material-web

    11.3Kmaterial-components/material-web · SCSS

    Material Web (@material/web) is Google's library of web components implementing Material 3, the latest version of their open-source design system, for building accessible web UIs.

  49. 52

    MaterialDesign

    11.3KTemplarian/MaterialDesign

    This is the source repo for Material Design Icons (MDI), a community-driven icon set with 7000+ icons, including Google's official Material Design icons converted into developer-friendly formats.

  50. 53

    base-ui

    11.2Kmui/base-ui · TypeScript

    Base UI is an open-source, unstyled React component library for building accessible user interfaces and design systems, created by the team behind Radix, Floating UI, and Material UI.

  51. 54

    react-styleguidist

    11.1Kstyleguidist/react-styleguidist · TypeScript

    React Styleguidist is a component development environment with a hot-reloaded dev server and a living style guide you can share with your team. It lists component propTypes and shows live, editable usage examples pulled from Markdown files.

  52. 55

    fluentui-system-icons

    10.9Kmicrosoft/fluentui-system-icons · HTML

    Fluent UI System Icons is Microsoft's open collection of familiar, friendly and modern icons, shipped as ready-made packages for Android, iOS/macOS and Flutter, plus plain SVG files.

  53. 56

    shadcn-vue

    10.7Kunovue/shadcn-vue · TypeScript

    shadcn-vue is the Vue port of shadcn-ui: beautifully designed, accessible UI components that you can customize, extend, and build your own component library on.

  54. 57

    react-native-ui-kitten

    10.7Kakveo/react-native-ui-kitten · TypeScript

    UI Kitten is a React Native UI library built on the Eva Design System: consistently styled general-purpose components for building multi-brand cross-platform mobile apps, with themes that switch at runtime.

  55. 58

    tweakcn

    10.5Kjnsahaj/tweakcn · TypeScript

    tweakcn is a visual no-code theme editor for Tailwind CSS and shadcn/ui components — you restyle your UI through a graphical editor instead of hand-writing theme code, starting from ready-made presets.

  56. 59

    vanilla-extract

    10.4Kvanilla-extract-css/vanilla-extract · TypeScript

    vanilla-extract lets you write CSS styles in TypeScript (or JavaScript) with locally scoped class names and CSS variables, then compiles everything into static CSS files at build time with zero runtime cost.

  57. 60

    stylex

    10.4Kfacebook/stylex · JavaScript

    StyleX is a styling system from Meta — a JavaScript library for defining styles for optimized user interfaces.

  58. 61

    semi-design

    10.4KDouyinFE/semi-design · TypeScript

    Semi Design is a comprehensive design system and React UI library: 80+ production-quality components kept stable since 2019, plus tooling that connects design and code — a Figma Design-to-Code plugin and a DSM platform for custom design tokens.

  59. 62

    Instatic

    9KCoreBunch/Instatic · TypeScript

    An open-source, self-hosted visual CMS positioned against Webflow, Framer and WordPress: editor, content engine, media, auth, forms, plugins and publisher all in one Bun server, publishing clean static pages.

  60. 63

    skills

    8Kjakubkrehel/skills · Markdown

    A collection of agent skills for Claude Code that help you build better interfaces, covering UI, typography, colors, accessibility, layout and product writing.

  61. 64

    native

    7.8Kvercel-labs/native · Zig

    Native SDK is a toolkit for building native desktop apps: you write views in declarative .native markup and logic in plain TypeScript (or Zig), and the SDK compiles everything to native code that its own engine renders directly into real OS windows, with no browser, WebView, or JS runtime in the final binary.

  62. 65

    threeui

    6.7KMengTo/threeui · HTML

    ThreeUI Community is the open-source, login-free edition of a React component catalog built around Three.js/WebGL and shader-driven UI components, with a live interactive browsing site.

  63. 66

    interface-design

    5.8KDammyjay93/interface-design · Shell

    Interface Design is a skill for coding agents (Claude Code, Codex, and other skill-compatible agents) that applies design principles, remembers UI decisions across sessions, and enforces consistency when building dashboards, apps, tools, and admin panels.

  64. 67

    oat

    5.5Kknadh/oat · CSS

    Oat is an ultra-lightweight, zero-dependency semantic HTML+CSS+JS UI component library (~10KB min+gz) for building web interfaces without a framework or build step.

  65. 68

    transitions.dev

    5.4KJakubantalik/transitions.dev · HTML

    Transitions.dev is a collection of 43+ reusable, copy-ready CSS transition snippets, shipped through an interactive showcase site, an npm CLI, and an installable agent skill for AI coding tools.

  66. 69

    animal-island-ui

    5Kguokaigdg/animal-island-ui · TypeScript

    Animal-Island-UI is a lightweight React UI component library with an original 'island' style design language — custom icons, layouts and animations made for personal front-end practice.

  67. 70

    canvas-ui

    5KDavidHDev/canvas-ui · TypeScript

    Canvas UI is an open-source library of creative canvas components for building live, interactive web effects. Each component draws fluid simulations, shader effects, or 3D scenes directly over your real, still-clickable HTML.

  68. 71

    baoyu-design

    4.4KJimLiu/baoyu-design · JavaScript

    baoyu-design packages Claude Design — the design engine behind claude.ai/design — as a portable Agent Skill you drop into a local coding agent like Cursor, Claude Code, or Codex, producing polished UI mockups, prototypes, wireframes, landing pages, dashboards, and slide decks as self-contained HTML.

  69. 72

    design-extract

    4.3KManavarya09/design-extract · HTML

    Designlang (the 'design-extract' CLI) points a headless browser at any live URL and reads the site's complete design system off the DOM in one command, emitting 17+ files including DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens, component anatomy, and brand voice.

  70. 73

    awesome-claude-design

    4.1KVoltAgent/awesome-claude-design

    A curated collection of 68 ready-to-use DESIGN.md files - one-page briefs describing a brand's visual language - that you drop into Claude Design to scaffold a full UI design system (colors, type, components, preview cards, working UI kit) in one shot.

  71. 74

    kumo

    4.1Kcloudflare/kumo · TypeScript

    Kumo is Cloudflare's component library for building modern web applications — accessible, design-system-compliant UI components built on Base UI.

  72. 75

    scroll-craft

    3.6Knateherkai/scroll-craft · JavaScript

    scroll-craft is an agent skill that teaches coding agents like Codex or Claude Code how to build premium, scroll-driven immersive websites to a consistent design standard, bundling a design workflow, reference docs, an animation engine, and verification tools.

  73. 76

    mono-color-skill

    3.4Kyanliudesign/mono-color-skill · Python

    A one-ink and controlled two-ink editorial image skill for posters, zines, portraits, packaging, and visual field notes — it turns a theme, sentence, object, or supplied photo into an original editorial-style image.

  74. 77

    lint

    3.2Kshadcn-ui/lint · TypeScript

    An agent-first linter for Tailwind design systems: you define what is allowed, and when an agent breaks a rule the error explains what is wrong and suggests a fix using your components, variants, and theme.

  75. 78

    pdfcn

    2.9Kshadcn-labs/pdfcn · TypeScript

    pdfcn is a free, open-source collection of ready-to-use, customizable PDF components for React that you copy into your project and ship, rather than install as a dependency.

  76. 79

    appllama-skills

    2.9KAppllama/appllama-skills

    Appllama-skills is a pair of AI agent skills that teach coding agents (Claude Code, Cursor, Codex, etc.) to build native-quality mobile app screens by studying patterns from top-grossing apps.

  77. 80

    ux-ui-agent-skills

    2Kplugin87/ux-ui-agent-skills · JavaScript

    A Claude Code skill/plugin pack that turns Claude into a senior UX/UI design architect — generating DTCG design tokens, 52 components, and WCAG 2.2 AA/AAA accessible code for any framework, then checking the output against 50+ automated quality gates instead of trusting the model's self-report.

  78. 81

    rare-ui

    1.8Kswamimalode07/rare-ui · TypeScript

    Rare UI is a shadcn registry of rare, ready-to-use UI components and animations that you install directly into your Next.js, Tailwind CSS and TypeScript codebase.

  79. 82

    solid-glass

    1.7Kdeeplethe/solid-glass · TypeScript

    Solid Glass is a design system and theme for AI application interfaces, giving shadcn/ui components a 'glass' aesthetic that sits between flat design and fully transparent liquid glass.

  80. 83

    open-claude-ui

    1.1KCaho1/open-claude-ui · TypeScript

    A high-fidelity open-source React UI component library and motion engine that reverse-engineers and recreates Anthropic's official Claude desktop app design system (CDS), down to the exact spring physics, surface colors, and audio pipeline.

  81. 84

    gr8r-studio

    848gr8rstudio/gr8r-studio · JavaScript

    Gr8r Studio is a calm, structured project management workspace with a home dashboard, inbox, my tasks, projects with board, list, table, calendar, timeline and files views, plus members, teams, activity and settings.

  82. 85

    arc-library

    804kuratlielia/arc-library · TypeScript

    A free, open source library of 100 React components and 22 blocks with calm, physical motion. Items install as plain source code via the shadcn CLI or copy-paste, and every one has a live preview at uiarc.dev.

  83. 86

    refactoring-ui-skill

    646s0xDk/refactoring-ui-skill · CSS

    A Claude Code skill that teaches Claude the concrete, mechanical design rules from the book 'Refactoring UI' by Adam Wathan and Steve Schoger — fixed spacing/type/color/shadow scales, hierarchy via weight and color, and depth via emulated light — so Claude applies them when building or fixing interfaces.

  84. 87

    boardui

    630BoardUI/boardui · TypeScript

    BoardUI is a React design system for agentic interfaces: UI pieces an AI product needs (chat, thinking indicators, agent logs) plus the usual dashboard pieces (tables, cards, forms), delivered as source files you copy into your own project.

  85. 88

    ChunUI

    538liseami/ChunUI · Swift

    ChunUI is a SwiftUI design system extracted from the production iOS app Zinner, giving you a ready-made monochrome visual language: grayscale plus one brand color, neumorphic buttons, native sheet presentation, Metal shader effects and dot-matrix animations.

  86. 89

    Core-Framework

    190CoreBunch/Core-Framework · TypeScript

    Core Framework is a visual CSS framework and design-token builder you use across the web, WordPress, and Figma to build a design system once and export portable, production-ready CSS.

  87. 90

    Monocharts

    189Subhan-code/Monocharts · TypeScript

    It is a curated collection of premium React micro-interaction components, transition effects, and animated card layouts (named @subhanhq/amicro), built on top of the Motion animation library.

  88. 91

    bezel

    180crabtalk/bezel · Rust

    Bezel is a component library for GPUI, the Rust UI framework — a SwiftUI-lean set of native desktop widgets where style flows through the environment, never through widget parameters.

Often tagged together