SA Skill Atlas GitHub skill index
EN
返回分类首页

前端

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

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

二级分类

全部 前端 165
专题指南

如何使用这个前端索引

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

适合什么时候使用

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

如何选择

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

前端 仓库

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

交互式浏览

system-design-primer

综合

Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.

FrontendPythondesigndesign-patternsdesign-systemdevelopment

适合场景

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

vue

框架

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

FrontendTypeScriptframeworkfrontendjavascriptvue

适合场景

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

next.js

框架

The React Framework

FrontendJavaScriptblogbrowsercompilercomponents

适合场景

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

ui

框架

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

FrontendTypeScriptbase-uicomponentslaravelnextjs

适合场景

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

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

fastapi

框架

FastAPI framework, high performance, easy to learn, fast to code, ready for production

FrontendPythonapiasyncasynciofastapi

适合场景

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

material-ui

框架

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

FrontendJavaScriptdesign-systemmaterial-designmaterial-uireact

适合场景

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

storybook

框架

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

FrontendTypeScriptangularcomponentsdesign-systemsdocumentation

适合场景

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

gin

框架

Gin is a high-performance HTTP web framework written in Go. It provides a Martini-like API but with significantly better performance—up to 40 times faster—thanks to httprouter. Gin is designed for building REST APIs, web applications, and microservices.

FrontendGoframeworkgingomiddleware

适合场景

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

system-design-101

综合

Explain complex systems using visuals and simple terms. Help you prepare for system design interviews.

Frontendawscloud-computingcoding-interviewscomputer-scienceinterview-questions

适合场景

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

system_prompts_leaks

综合

Extracted system prompts from Anthropic - Claude Fable 5, Opus 4.8, Claude Code, Claude Design. OpenAI - ChatGPT GPT-5.6, Codex GPT-5.6, GPT-5.5. Google - Gemini 3.5 Flash, 3.1 Pro, Antigravity. xAI - Grok, Cursor, Copilot, VS Code, Perplexity, and more. Updated regularly.

FrontendJavaScriptaiai-agentsanthropicawesome

适合场景

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

element

框架

A Vue.js 2.0 UI Toolkit for Web

FrontendVuecomponentselement-uijavascriptui-kit

适合场景

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

ionic-framework

框架

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

FrontendTypeScriptangularcapacitorframeworkfrontend

适合场景

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

expo

框架

An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.

FrontendTypeScriptandroidapp-frameworkexpoframework

适合场景

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

awesome-react-components

框架

Curated List of React Components & Libraries.

Frontendawesomeawesome-listreactreact-componentreact-components

适合场景

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

awesome-cheatsheets

框架

👩‍💻👨‍💻 Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.

FrontendJavaScriptbackendbashcheatsheetcheatsheets

适合场景

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

system-design

设计系统

Learn how to design systems at scale and prepare for system design interviews

Frontendarchitecturedistributed-systemsengineeringinterviewinterview-preparation

适合场景

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

react-bits

框架

An open source collection of animated, interactive & fully customizable React components for building memorable websites.

FrontendJavaScript3danimationscomponent-librarycomponents

适合场景

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

styled-components

框架

Fast, expressive styling for React. Server components, client components, streaming SSR, React Native—one API.

FrontendTypeScriptcsscss-in-jsreactreactnative

适合场景

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

vuetify

框架

🐉 Vue Component Framework

FrontendTypeScriptjavascriptmaterialmaterial-componentsmaterial-design

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for TypeScript projects
  • Open GitHub for documentation, examples, and issues
41k stars TypeScript
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

fiber

框架

⚡️ Express inspired web framework written in Go

FrontendGoexpressexpressjsfastfiber

适合场景

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

awesome-system-design-resources

综合

Learn System Design concepts and prepare for interviews using free resources.

FrontendJavaawesomebackendcomputer-sciencedistributed-systems

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for Java projects
  • Open GitHub for documentation, examples, and issues
40k stars Java
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

preact

框架

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

FrontendJavaScriptcomponentsdomjsxpreact

适合场景

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

servo

综合

Servo aims to empower developers with a lightweight, high-performance alternative for embedding web technologies in applications.

FrontendRustbrowserrustservoweb

适合场景

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

fastify

框架

Fast and low overhead web framework, for Node.js

FrontendJavaScripthacktoberfestnodejsperformancespeed

适合场景

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

awesome-react-native

框架

Awesome React Native components, news, tools, and learning material!

FrontendJavaScriptawesome-listmobilereactreact-native

适合场景

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

nps

综合

一款轻量级、高性能、功能强大的内网穿透代理服务器。支持tcp、udp、socks5、http等几乎所有流量转发,可用来访问内网网站、本地支付接口调试、ssh访问、远程桌面,内网dns解析、内网socks5代理等等……,并带有功能强大的web管理端。a lightweight, high-performance, powerful intranet penetration proxy server, with a powerful web management terminal.

FrontendGodnsfirewallgogzip

适合场景

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

seaweedfs

综合

SeaweedFS is a distributed storage system for object storage (S3), file systems, and Iceberg tables, designed to handle billions of files with O(1) disk access and effortless horizontal scaling.

FrontendGoblob-storagecloud-drivedistributed-file-systemdistributed-storage

适合场景

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

echo

框架

High performance, minimalist Go web framework

FrontendGoechogohttp2https

适合场景

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

beego

框架

beego is an open-source, high-performance web framework for the Go programming language.

FrontendGobeegogo

适合场景

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

mantine

框架

A fully featured React components library

FrontendTypeScriptdark-modedark-themehooksreact

适合场景

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

lighthouse

综合

Automated auditing, performance metrics, and best practices for the web.

FrontendJavaScriptauditbest-practiceschrome-devtoolsdeveloper-tools

适合场景

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

heroui

框架

🚀 Beautiful, fast and modern React UI library. (Previously NextUI)

FrontendMDXcomponent-librarycomponentslibraryreactjs

适合场景

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

headlessui

框架

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

FrontendTypeScripta11yaccessibilitycomponentsheadless-ui

适合场景

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

react-select

框架

The Select Component for React.js

FrontendTypeScript

适合场景

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

recharts

框架

Redefined chart library built with React and D3

FrontendTypeScriptchartcharting-librarycomponentsd3

适合场景

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

react-virtualized

框架

React components for efficiently rendering large lists and tabular data

FrontendJavaScriptgridlistlistviewperformance

适合场景

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

react-admin

框架

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design

FrontendTypeScriptadminadmin-dashboardadmin-on-restadmin-ui

适合场景

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

system-design-academy

综合

If you want to become good at AI & system design, join this newsletter 👇

Frontendcomputer-sciencedevelopmentdistributed-systemshigh-level-designinterview-questions

适合场景

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

design.md

设计系统

A format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.

FrontendTypeScript

适合场景

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

haystack

框架

Open-source AI orchestration framework for building context-engineered, production-ready LLM applications. Design modular pipelines and agent workflows with explicit control over retrieval, routing, memory, and generation. Built for scalable agents, RAG, multimodal applications, semantic search, and conversational systems.

FrontendMDXagentagentsaigemini

适合场景

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

iris

框架

The fastest HTTP/2 Go Web Framework. New, modern and easy to learn. Fast development with Code you control. Unbeatable cost-performance ratio :rocket:

FrontendGodependency-injectiongogolanghttp2

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for Go projects
  • Open GitHub for documentation, examples, and issues
26k stars Go
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

Hystrix

综合

Hystrix is a latency and fault tolerance library designed to isolate points of access to remote systems, services and 3rd party libraries, stop cascading failure and enable resilience in complex distributed systems where failure is inevitable.

FrontendJava

适合场景

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

vant

框架

A lightweight, customizable Vue UI library for mobile web apps.

FrontendTypeScriptcomponentsmobileui-kitui-library

适合场景

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

iview

框架

A high quality UI Toolkit built on Vue.js 2.0

FrontendVuecomponentscssdesign-systemsfrontend

适合场景

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

system-design-interview

综合

System design interview for IT companies

Frontenddesign-systemsinterviewinterview-preparationinterview-questionssystem

适合场景

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

react-bootstrap

框架

Bootstrap components built with React

FrontendTypeScriptbootstraphacktoberfestjavascriptreact

适合场景

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

blueprint

框架

A React-based UI toolkit for the web

FrontendTypeScriptblueprintcomponentsdesignlerna

适合场景

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

ant-design-vue

框架

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

FrontendVueantant-designantdantd-vue

适合场景

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

magicui

框架

UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.

FrontendMDXcomponentsframer-motionnextjsreact

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for MDX projects
  • Open GitHub for documentation, examples, and issues
22k stars MDX
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

visx

框架

🐯 visx | visualization components

FrontendTypeScriptchartd3data-visualizationreact

适合场景

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

Vue.Draggable

框架

Vue drag-and-drop component based on Sortable.js

FrontendJavaScriptcomponentdrag-and-dropvue

适合场景

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

NativeBase

框架

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.

FrontendTypeScriptandroidhacktoberfestiosnative-platforms

适合场景

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

fluentui

框架

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

FrontendTypeScriptcomponentsfluentmicrosoftoffice-ui-fabric

适合场景

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

ignite

框架

Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more! 9 years of continuous development and counting.

FrontendTypeScriptboilerplatecliexpogenerator

适合场景

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

mdx

框架

Markdown for the component era

FrontendJavaScriptjsxmarkdownmdxreact

适合场景

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

当前展示前 60 个仓库。打开交互式浏览器可查看全部 165 个结果。