跳到正文
前端学习导航站
English (语言)

推荐一个站点

填个名字和网址,提交后会在 GitHub 打开推荐页,确认后即完成推荐。

Component Gallery

做 Tabs 前先看二十家大厂怎么做:60 种组件 × 95 个设计系统 × 2700 个真实示例

内容更新日期 · 2026-09-20

What is it · 它是什么

什么是 Component Gallery

The Component Gallery 是跨设计系统的 UI 组件实例索引:60 个组件类型(弹窗、下拉、手风琴、分页等),汇集 Shopify Polaris、Red Hat、Elastic UI 等 95 个真实设计系统的 2700+ 个实际示例,并按技术栈(React/Web Components/Tailwind)和特性(开源/无障碍/带代码示例)标注。做组件设计时「先看大厂怎么做」的一站式参照,完全免费。

How to use · 怎么用

怎么用 Component Gallery

  1. 按组件类型(Tabs/Dialog/Combobox 等)直达,横向对比各设计系统的做法。
  2. 用技术栈与特性标注(开源/无障碍/代码示例)快速筛选可参考实现。
  3. 点进源设计系统看完整规范上下文。

Key features · 核心特点

Component Gallery 的核心特点

  • 60 种组件类型 × 95 个设计系统 × 2700+ 真实示例
  • 按技术栈(React/Web Components/Tailwind)标注
  • 开源/无障碍/代码示例特性筛选
  • 完全免费

同类推荐

内容型网站的首选框架:默认零 JS,需要交互的地方才插 React/Vue 岛屿

全球最流行的前端框架:v6 开始 CSS-first 主题化、组件翻新,连 AI 助手都有专属文档