SA Skill Atlas GitHub skill index
EN
返回 前端

UI 组件

前端框架、组件系统、Web 性能和浏览器应用架构。

13 仓库 前端 更新于 7月16日

二级分类

全部 前端 165
专题指南

如何使用这个UI 组件索引

UI 组件页面收录了 GitHub 上较受关注的开源项目,并按标签、语言和实际使用场景组织。它适合作为初筛入口,帮助你在打开具体仓库前先理解方向、比较工具并形成候选清单。

适合什么时候使用

  • 寻找与UI 组件相关的成熟开源项目。
  • 比较仓库热度、语言、标签和适用场景。
  • 在深入技术调研前建立候选列表。
  • 通过相关专题发现相邻方向。

如何选择

  • 优先选择与你的语言、运行时和部署方式匹配的项目。
  • 采用前检查近期提交、Issue 活跃度、文档质量和许可证。
  • 星标只能说明流行度,不能直接代表适配度或生产可用性。
  • 这个专题中常见语言包括 TypeScript, Python, JavaScript。
  • 常见标签包括 Frontend, design, TypeScript, a11y, ai。

UI 组件 仓库

13 个仓库按 GitHub stars 排序。需要实时筛选时可以打开交互式浏览器。

交互式浏览

awesome-design-md

UI 组件

A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.

Frontendawesome-listdesign-mddesign-systemdesign-tokensfigma

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for software projects
  • Open GitHub for documentation, examples, and issues
102k stars
GitHub

chakra-ui

UI 组件

Chakra UI is a component system for building SaaS products with speed ⚡️

FrontendTypeScripta11yaccessibleark-uichakra-ui

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for TypeScript projects
  • Open GitHub for documentation, examples, and issues
41k stars TypeScript
GitHub

quivr

UI 组件

Opiniated RAG for integrating GenAI in your apps 🧠 Focus on your product rather than the RAG. Easy integration in existing products with customisation! Any LLM: GPT4, Groq, Llama. Any Vectorstore: PGVector, Faiss. Any Files. Anyway you want.

FrontendPythonaiapichatbotchatgpt

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for Python projects
  • Open GitHub for documentation, examples, and issues
39k stars Python
GitHub

awesome-design-systems

UI 组件

💅🏻 ⚒ A collection of awesome design systems

Frontendawesomeawesome-listdesign-systemshacktoberfestpattern-library

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for software projects
  • Open GitHub for documentation, examples, and issues
25k stars
GitHub

tabler-icons

UI 组件

A set of over 6000 free MIT-licensed high-quality SVG icons for you to use in your web projects.

FrontendJavaScriptbootstrap-iconscomponentscssicon

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for JavaScript projects
  • Open GitHub for documentation, examples, and issues
21k stars JavaScript
GitHub

bit

UI 组件

AI-powered development workspaces with reusable components, architectural clarity and zero overhead.

FrontendTypeScriptaicollaborationcomponent-drivencomposable

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for TypeScript projects
  • Open GitHub for documentation, examples, and issues
18k stars TypeScript
GitHub

98.css

UI 组件

A design system for building faithful recreations of old UIs

FrontendCSScssdesign-systemguy-fieriwindows98

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for CSS projects
  • Open GitHub for documentation, examples, and issues
11k stars CSS
GitHub

fluentui-system-icons

UI 组件

Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

FrontendHTMLandroiddesignfluentflutter

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for HTML projects
  • Open GitHub for documentation, examples, and issues
11k stars HTML
GitHub

system-design-notes

UI 组件

Notes of the book System Desgin Interview - An Insider's Guide

Frontend

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for software projects
  • Open GitHub for documentation, examples, and issues
7.7k stars
GitHub

Lona

UI 组件

A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.

FrontendSwift

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for Swift projects
  • Open GitHub for documentation, examples, and issues
7.5k stars Swift
GitHub

uswds

UI 组件

The U.S. Web Design System helps the federal government build fast, accessible, mobile-friendly websites.

FrontendSCSSdesigndesign-systemsgovernmentuswds

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for SCSS projects
  • Open GitHub for documentation, examples, and issues
7.1k stars SCSS
GitHub

Grokking-System-Design

UI 组件

Systems design is the process of defining the architecture, modules, interfaces, and data for a system to satisfy specified requirements. Systems design could be seen as the application of systems theory to product development.

FrontendShell

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for Shell projects
  • Open GitHub for documentation, examples, and issues
6.5k stars Shell
GitHub

skeleton

UI 组件

Skeleton is an adaptive design system powered by Tailwind CSS.

FrontendTypeScripta11yaccessibilityastrocomponents

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for TypeScript projects
  • Open GitHub for documentation, examples, and issues
6.0k stars TypeScript
GitHub