挑选适合你项目的UI 组件套件
精选收录 UI 组件套件、Headless 基建、动效 3D、AI 界面、数据图表、图标字体及 Agent 技能,方便快速选型与高效开发。
23rd
由 radiumcoders 打造的开源 shadcn/ui 组件注册表,提供 WebGL 着色器、趣味 404 与交互式展示组件,Copy-Paste 装进仓库即装即改。
Duolingo UI (ShadLingo)
基于 shadcn/ui v4 与 Tailwind CSS 深度定制的 Duolingo 风格设计系统与组件库,完整复刻多邻国标志性的 3D 按钮弹簧投影、高饱和猫头鹰绿与游戏化卡片交互。
Rewamp UI
专为现代 Web 开发者打造的高互动性 React 动效组件库,深度整合 Tailwind CSS 4、Framer Motion 与 Three.js WebGL 特效,提供无捆绑的 Copy-Paste 源码直达体验与专有 CLI 工具。
ObsidianUI
专为 React 与 Next.js 打造的高表现力开源组件库,收录 100+ 个创意动效组件、光标交互与 WebGL 画布特效,支持 shadcn 注册表一键安装与本地 MCP 协议。
Watermelon UI
专为现代 Web 开发者打造的开源 React UI 平台,汇聚高品质动效交互组件、落地页区块与完整仪表盘模板,支持 shadcn/ui 注册表一键分发与原生 AI/MCP 深度集成。
nxui (Vue)
专为 Vue 3 与 Nuxt 4 打造的高颜值动效组件库,收录 230+ 款组件,基于 Tailwind CSS v4 与 motion-v 构建,支持 shadcn 源码复用模式。
Kinetics (Colorion)
基于真实弹簧物理建模的现代 Web 微交互动效库,收录 150+ 交互案例,同时提供纯 CSS 贝塞尔曲线、React 代码与 AI 智能体提示词。
Ambient CSS
基于物理光照系统的创新 CSS 框架,严格对照 Blender 光线追踪校准,只需定义一个光源矢量,所有阴影、倒角高光与曲面渐变自动推导。
8bitcn/ui
基于 shadcn/ui 与 Tailwind CSS 构建的复古 8-Bit 像素风 React 组件库,兼备像素艺术美学与现代 WAI-ARIA 无障碍标准。
Evil Charts
专为 shadcn/ui 设计的高颜值动效 React 图表库,独创 Recharts 与 Apache ECharts 双引擎同构架构,开箱支持流体光效与微动效。
Great UI
基于 Tailwind CSS v4、Motion 与 TypeScript 构建的高交互开源 React 组件库,主打创意转场、微动效与源码免依赖复制。
Astryx (Meta)
Meta(Facebook)官方开源的企业级设计系统与 React 19 组件库,内置 170+ 高度可访问组件、StyleX 与面向 AI 智能体的工作流。
remocn
面向 Remotion 与 AI 编程智能体的视频动效组件库,采用 shadcn 源码复制模式,支持声明式代码生成高品质产品 Demo 视频。
Amicro
专为现代化 React 打造的高阶微交互与转场动效组件库,基于 Motion 与 Tailwind 构建,提供精巧卡片组、扇形动效与零黑盒源码复制模式。
pdfcn
基于 Takumi 与 Forme 构建的高品质开源 React PDF 组件库,遵循 shadcn 源码复用模式,开箱即用支持商业发票、报表及多套主题预设。
Animated Icons
收录 3600+ 款动态交互式 Lucide、Iconoir 与 Heroicons 图标库,支持悬停触发、双色渐变与 React 组件开箱即用。
Svelte Bits
专为 Svelte 5 与 SvelteKit 打造的开源动态 UI 组件库,收录 60+ 款交互式背景、文字动效与弹性卡片组件。
Remix Icon
为设计师和开发者精心打造的开源中性风格图标系统。收录 2800+ 款基于 24px 网格的线性与面性高品质图标。
Honest UI
源码优先的 React 创意动效组件库,包含 WebGL Shader 着色器背景、物理力学交互动效与高级创意图表。
Soundcn
专为 React 与 shadcn 打造的交互音效库,包含 800+ 高品质微交互声效,为按钮、开关与通知提供灵动的声音反馈。
Afterglow
复古终端命令行风格的 shadcn 设计系统,基于 Base UI 构建,提供 8 款荧光显示主题、扫描线与极客 CRT 视觉动效。
Better Auth UI
专为 Better Auth 打造的即插即用认证 UI 组件库,提供登录、注册、双因素验证 (2FA)、Passkey 和会话管理等全套高品质界面。
Snapcn
专为 React 打造的 Remotion 视频动效组件库,通过 shadcn CLI 快速安装文字揭示、卡拉OK字幕、设备样机与整段视频场景代码。
Plate.js
基于 Slate 和 React 构建的企业级富文本编辑器框架。深度融合 shadcn/ui 样式生态,提供 50+ 模块化插件与原生 AI 协同能力。
ProseKit
基于 ProseMirror 构建的高性能、跨框架无头富文本编辑器基座。原生深度支持 React、Vue、Svelte 与 Solid。
SVGL (SVG Logo Library)
专为开发者打造的高品质 SVG 品牌 Logo 与技术栈图标库。支持一键复制矢量代码、多框架组件与公共 API 接入。
shadcn maps
专为 React 与 shadcn/ui 生态打造的交互式矢量 SVG 地图组件库,涵盖 170+ 国家地区地图与一行命令安装。
Tetra UI
基于 Tailwind CSS 与 Radix UI 无头基建构建的现代 React 组件库,注重严谨的无障碍访问、极简美学与高定制性。
AniUI
基于 React、Tailwind CSS 和 Framer Motion 构建的 100+ 款现代动态 UI 组件库,支持即粘即用。
Inspora (Visual Design Gallery)
聚焦前沿视觉设计、现代排版、创意机构官网与前卫品牌美学的精选视觉灵感档案库。
UI.live (Interactive UI Components)
交互式 UI 组件与 AI 界面灵感社区。支持实时在线沙箱调试、组件热度榜单与 React/Tailwind 源码一键复用。
Design Spells (UI Micro-Interactions)
收录如“魔法”般惊艳的微交互彩蛋、光影动效与趣味细节的精选灵感库,致敬极致软件工程美学。
Mobbin (Mobile & Web UI Design Library)
全球最大的移动端与 Web 界面设计参考库,收录 30 万+ 真实应用高清截图、完整用户旅程 (User Flows) 与交互模式。
Swiped Design
聚合 X (Twitter) 与 LinkedIn 上顶级设计师高赞视觉推文、UI 拆解与排版心得的实时设计灵感画廊。
Curated Design
由知名设计师 Faris 策展的高品质 Web 设计灵感画廊,收录极具质感的现代排版、创意网格、3D 视觉与优秀作品集。
Saaspo (SaaS Landing Page Inspiration)
收录 2000+ 款优质 SaaS 落地页、定价表与功能板块的精选设计灵感库,助力快速构建高转化商业官网。
100 Text Animations (Kawai Design)
汇集 100 种纯 CSS 与原生 JS 文本动效的交互式精选库。支持实时自定义文字预览、喜好筛选与一键复制源码。
60fps (UI/UX Animation Inspiration)
全球顶级移动与 Web 界面动效与微交互灵感库,深度收录 115k+ 设计师与工程师推崇的高帧率交互细节与设计案例。
B2TF (Vintage Mobile App Directory)
精选移动端复古美学与拟物化设计灵感的案例目录。汇聚经典黑胶磁带播放器、胶片相机取景器、实体计算器等高品质独立应用。
Anime.js
轻量、强大且极具表现力的 JavaScript 动效引擎。原生支持 CSS、SVG 路径描边与变形、DOM 属性及 JavaScript 对象的灵活链式动画。
GSAP (GreenSock Animation Platform)
全球前端动效工业级标准,专为专业开发者打造的极速 JavaScript 动画平台,提供超强时间轴控制与极致 60fps 性能。
Chinese Web Font (中文网字计划)
全方位、全场景的开源中文 Web 字体解决方案。通过自研多线程字体分包引擎(cn-font-split)与高速分发网络,彻底攻克中文字体体积巨大导致的加载难题。
Free Font (免费商用字体)
由知名开源开发者王楚江(jaywcjlove)维护的权威商用免费中英文字体导航,系统收录黑体、宋体、楷体、艺术体等数以百计的开源字体资产。
Google Fonts
全球规模最大、使用最广泛的开源 Web 字体与图标服务,提供覆盖全球多语言的超千款优质可变字体与高可用 CDN 加速。
Free Faces Gallery
由资深设计师 Simon Foster 策展的高颜值免费字体画廊,精选极具个性的手写体、展示体、等宽体、衬线与无衬线字体资产。
Best Free Fonts
专为设计师与前端开发者打造的高品质免费与开源字体精选平台,支持实时在线排版测试、智能字体搭配与商业授权指引。
AntV
蚂蚁集团开源的数据可视化生态:G2 可视化语法、G6 图分析、L7 地理空间可视化、X6 图编辑引擎、S2 多维表格、F2 移动端图表,企业级规模实战验证。
Evil Buttons
内含 31 个高度动效化的趣味按钮组件的 shadcn/ui registry,基于 Motion 构建,暗黑美学风格浓郁,一条 CLI 命令安装,复制即用。
Koboyo Icons
收录 135,610 个免费手绘风 SVG 图标的资源库,支持同义词智能搜索、currentColor 继承,无需署名即可商用,框架无关即取即用。
Mapcn
基于 MapLibre GL 构建的免费开源 React 地图组件库,Tailwind CSS 原生样式,通过 shadcn/ui CLI 一条命令安装,让漂亮的地图变得简单。
Lucide Animated
全球最受欢迎的开源动态图标库之一(8,000+ Stars),基于 Lucide 与 Motion 打造,收录 350+ 款支持 shadcn CLI 的精美动态 React 图标。
Hover Icons (itshover)
收录 180+ 款自带悬停微动效的开源 React 矢量图标库,支持物理弹簧回弹、路径变形与描边动画,开箱即用支持源码拷贝。
Collect UI
全球老牌 UI 交互模式灵感库,收录 14,000+ 精选界面设计作品,细分为 160+ 专项场景(注册登录、支付结算、个人主页等)。
Fancy Components
收录极具创意与趣味性的开源 React 动效组件库(涵盖文字乱码解码、物理吸附卡片与悬浮粒子网格),基于 Tailwind CSS 与 Motion 打造。
Motion Primitives
由知名设计师 ibelick 打造的高质感开源动效组件库,基于 Framer Motion 与 Tailwind CSS,提供磁贴吸附、聚光灯与变形容器等前沿交互。
Number Flow
业界顶级的高质感数字滚动过渡组件,基于物理弹簧动画与本地化格式化,原生支持 React、Vue、Svelte 与 Vanilla JS。
Rare UI
专注于独特交互与趣味动效的开源 React 组件库,收录流体光球、重力文字、时长选择器与创意 AI 交互部件,支持 shadcn CLI 一键引入。
Refero Design
全球顶尖的 UI/UX 产品交互模式与界面设计灵感库,收录 14.2 万+ 真实产品截图、完整用户流转路径与 AI MCP Agent 深度检索能力。
Pace UI
收录 200+ 现代化 React 区块、全站模版与基于 GSAP 物理引擎打造的工业级交互动效组件库,专为 Next.js 与 TanStack Start 深度优化。
Logo Generator Skill
开源的 AI Coding Agent 徽标设计与品牌生成 Skill,支持 LLM 自动生成专业级矢量 SVG Logo、品牌图标与多风格展示大图。
Text Effects (Colorion)
精选纯 CSS、SVG 与 WebGL 创意文字动效与排版资产库,涵盖流动渐变、赛博霓虹、故障毛刺与动态文字渲染,支持一键复制代码。
Recent Design
全球前沿网页设计、UI/UX 灵感与视觉交互画廊(知名设计站 Godly 的官方升级迭代),每日精选顶尖创意工作室与先锋独立设计作品。
Fluid Functionalism
基于功能性动效与物理弹簧曲线打造的现代 UI 组件库,专注于通过细腻动效传递界面状态变更,完美兼容 shadcn/ui 生态。
Reicon
面向设计师与开发者的免费开源矢量图标与图形资产库,提供 3,900+ 图标、7.1 万+ 矢量插画、多框架同构与 AI Agent MCP 深度集成。
Kumo UI (Cloudflare)
Cloudflare 官方开源的现代化 React 组件库,底层基于 Base UI 无样式基建,具备企业级无障碍与语义化设计系统。
beUI
基于 Tailwind CSS 与 Framer Motion 构建的现代 React 动效组件注册表,提供流畅 Dock 栏与光影卡片。
Beautiful UI
专为 AI 编程助手(Claude Code / Cursor)量身定制的前端品味规则集,彻底终结千篇一律的 AI 模板烂俗设计。
Extend UI
专为 AI 文档工作流、文件智能体与 RAG 打造的开源 React 组件库,深度兼容 shadcn 注册表体系。
Icons0
专为开发者与 AI 编程助手打造的语义化图标搜索引擎,支持自然语言搜图与多框架代码一键导出。
Animate UI
专为 React 与 Tailwind 打造的现代动效注册表,提供动态图标、磁吸按钮与流体文字动效组件。
Paper Shaders
零三方依赖的 React WebGL 着色器背景组件库,提供工作室级流体波浪、噪波网格与液体折射动态背景。
Zelda Hyrule UI
完整复刻《塞尔达传说:旷野之息》希卡之石界面的 React 组件库,提供 84+ 款高精度海拉鲁风格交互组件。
Animal Island UI
以《集合啦!动物森友会》为灵感的治愈系 React & Vue 组件库,拥有 4.4k+ Stars 与可爱的粘土质感。
NeonBlade UI
专为赛博朋克与科幻未来风打造的 React 动效组件库,基于 Tailwind CSS 提供霓虹光效、扫描线与全息 HUD 界面。
Performative UI
充满讽刺极客幽默的硅谷风动效组件库,精准调侃独角兽创业公司融资估值、排队等待列表与浮夸数据大屏。
Eldora UI
专为现代产品落地页与作品集打造的 React 动效组件与区块库,基于 Tailwind CSS 与 Framer Motion 构建。
visx (Airbnb)
Airbnb 开源的底层低阶 React 可视化组件基建,拥有 2 万+ Stars,将 D3 的数学算力与 React 的声明式完美融合。
Tremor
构建现代仪表盘与数据看板的开源标杆组件库,基于 Tailwind CSS 与 React,拥有 1.6 万+ Stars。
TanStack Chart
TanStack 团队打造的无头数据可视化与图表底层基建,支持 React、Vue 与 Svelte 跨框架同构。
Apache ECharts
Apache 顶级开源数据可视化引擎,拥有 6.4 万+ Stars,支持 2D/3D 图表、地理大屏与百万级海量数据渲染。
Recharts
React 生态中使用最广泛的声明式数据可视化图表库,基于 D3 与 SVG 构建,拥有 2.7 万+ Stars。
Park UI
基于 Ark UI 状态机与 Panda CSS / Tailwind 构建的跨框架组件库,同时支持 React、Vue 与 SolidJS。
Headless UI
由 Tailwind CSS 官方团队出品的无样式无头组件库,支持 React 与 Vue,与 Tailwind 原子类原生契合。
React Aria
Adobe 出品的无样式 React 无头组件与 Hooks 库,提供业内最严苛的无障碍合规性与全平台交互手势支持。
Cult UI
基于 Tailwind CSS 与 Framer Motion 打造的高阶动效组件库,专为追求极致产品交互质感的开发者设计。
React Bits
拥有 4.6 万+ Stars 的顶级 React 动效组件库,提供 100+ 款炫酷文字动效、WebGL 动态背景与交互卡片。
Bklit UI
基于 Visx、Motion 与 shadcn 构建的现代化数据可视化图表库,提供交互式 Studio 调色与一键 CLI 安装。
Animata
纯手工打磨的 React 交互与动效组件库,基于 Tailwind CSS 构建,提供精美便当盒网格、光影按钮与流体标签。
Transitions.dev
精选现代 Web 页面过渡动效库,基于浏览器原生 View Transitions API,提供丝滑跨页面跳转与形变动画。
Uiverse.io
全球最大的开源 UI 灵感与动效元素社区,提供 3000+ 纯 CSS、Tailwind 与 React 可复制按钮、加载器与卡片。
Ant Design Vue
蚂蚁集团 Ant Design 设计语言的 Vue 3 官方实现,拥有 1.9 万 Stars 与完备的企业级中后台组件生态。
OpenTiny (TinyVue)
华为云开源的企业级设计系统与组件库,一套代码同时支持 Vue 2 / Vue 3 与 PC / 移动端,提供 100+ 重器级组件。
Arco Design Vue
字节跳动开源的企业级设计系统 Arco Design 的 Vue 3 官方实现,提供 60+ 组件与强大的主题配置市场。
Quasar Framework
一套代码同时构建 SPA、PWA、SSR、移动 App (Capacitor) 与桌面端 (Electron) 的全能 Vue 3 框架。
Naive UI
图森未来开源的 Vue 3 组件库,拥有 80+ 款精美组件、全量 TypeScript 支持与无需引入 CSS 文件的极致开发体验。
PrimeReact
专为企业级 React 打造的全功能组件套件,拥有 90+ 款工业级组件与世界级复杂 DataTable 数据表格引擎。
PrimeVue
拥有 90+ 款工业级组件的新一代 Vue 3 UI 套件,支持无样式模式(Unstyled)与 Tailwind CSS 深度融合。
Nuxt UI
由 Nuxt 官方核心团队打造的现代化 Vue 3 / Nuxt UI 组件库,基于 Tailwind CSS 与 Reka UI 无头交互构建。
Vuetify
Vue 3 生态中最受欢迎的 Material Design 组件框架,提供 80+ 完备组件与响应式栅格系统。
Phosphor Icons
专为现代界面打造的高品质灵活图标家族,提供 9000+ 图标与 6 种统一字重(极细到双色)。
React Icons
React 生态中最受欢迎的图标大一统集合包,聚合了 FontAwesome、Material、Feather、Lucide 与 Tabler 等 30+ 款主流图标库。
Morphicons
高视觉冲击力的矢量变形动效图标库,支持在播放/暂停、汉堡菜单/关闭等多种状态间实现丝滑的路径形变过渡。
gluestack-ui
由 NativeBase 团队打造的跨端通用组件库,基于 Tailwind CSS (NativeWind) 实现 Web 与移动端完全无缝复用。
React Native Paper
由 Callstack 团队打造的 React Native Material Design 3 组件库,支持高品质跨平台原生体验。
Panel UI
专为 Expo 量身定制的纯 TypeScript 跨端组件库,提供 110+ 模块,零原生依赖即可在 Expo Go 中即开即用。
HeroUI Native
传承 HeroUI (NextUI) 极致设计美学的移动端 React Native 组件库,支持 iOS 与 Android 原生渲染。
React Spring
Poimandres (pmndrs) 出品的物理弹簧动效库,基于真实物理力学模型,实现自然连贯、可随时中断的流畅动效。
Tamagui
革命性的全平台跨端 UI 体系与组件库,支持 React Native 与 Web 双端同构,配备编译期优化引擎。
Cloudscape Design System
亚马逊云科技(AWS)官方开源的企业级设计系统与 React 组件库,专为高密度云控制台与复杂仪表盘而生。
Primer React
GitHub 官方设计系统 Primer 的 React 组件库实现,专为全球开发者工作流与高品质工程打造。
Ring UI
JetBrains 官方开源的 Web UI 组件库,驱动了 YouTrack、Hub 与 TeamCity 等顶级开发工具。
Semi Design
字节跳动抖音前端团队开源的企业级设计系统与 React 组件库,拥有强大的 DSM 主题定制平台与 Figma 互通体系。
Fluent UI React
微软官方出品的企业级设计系统 React 组件库(Fluent 2),专为高密度企业系统与跨平台一致性打造。
coss UI
Cal.com 官方开源的设计系统与组件库,以极简 Linear 质感和强大的日历预约交互组件著称。
Mantine
拥有 100+ 款精美组件与 50+ 实用 Hooks 的全功能 React 工业级组件套件,集成表单、图表与通知系统。
Chakra UI
享誉全球的高开发体验 React 模块化组件库,以优雅的 Style Props 属性传参和完备的暗黑模式著称。
Base UI
由 MUI、Radix 与 Floating UI 核心作者联手打造的无样式无头 React 组件底层基建,提供极致纯粹的无障碍交互逻辑。
Material UI (MUI)
全球使用最广泛的 React UI 组件库之一,完整实现 Google Material Design 规范,提供开箱即用的高品质企业级组件。
copywriting (Marketing Skills)
高转化营销文案创作技能,打造直击痛点的产品价值主张、强力标题与无废话落地页文案。
ui-ux-pro-max
全方位 UI/UX 体验智能优化技能,专注于高转化率人机工效学与用户旅程链路设计。
web-design-guidelines (Vercel)
Vercel 官方出品的 Web 设计规范 Agent 技能,注入 Vercel 标志性的高对比黑白极简美学。
design-taste-frontend
著名的 Anti-Slop 前端审美技能,创新提出三旋钮(创意差异/动效强度/视觉密度)控制体系。
frontend-design (Anthropic)
Anthropic 官方出品的 AI 编程 Agent 前端设计技能,彻底杜绝千篇一律的 AI 模板感与廉价渐变。
TDesign
腾讯开源的企业级设计系统与组件库,支持 React、Vue、Flutter 与微信小程序等多端生态。
Motion (Framer Motion)
React 与现代 Web 的工业级动效库,提供物理弹簧引擎、布局过渡与手势拖拽。
Lucide Icons
现代 Web 最流行的一致性开源矢量图标库,shadcn/ui 的默认图标方案,支持全框架。
Ark UI
基于 Zag.js 状态机驱动的跨框架无头 UI 库,一套逻辑无缝运行于 React、Vue 与 Svelte。
Arco Design
字节跳动开源的企业级设计系统与组件库,同时支持 React 与 Vue,拥有强大的主题配置平台。
HeroUI (NextUI)
极具现代美感的高性能 React UI 库(原 NextUI),深度结合 Tailwind CSS 与弹簧物理动效。
daisyUI
最受欢迎的 Tailwind CSS 语义化组件插件,纯 CSS 零 JS 运行时,内置 30+ 款主题。
Element Plus
基于 Vue 3 面向设计师和开发者的企业级组件库,Vue 生态中最主流的中后台基石。
Ant Design
蚂蚁集团开源的企业级 UI 设计语言与 React 组件库,拥有数万企业验证的完备生态体系。
Radix UI Primitives
无样式、高无障碍标准的 React 无头底层组件库,shadcn/ui 的核心底层基石。
Aceternity UI
火爆全网的高视觉冲击力动效组件库,提供 3D 悬浮卡片、光影聚光灯与炫酷极光背景。
Magic UI
专为现代落地页与 SaaS 打造的动效组件库,基于 React、Tailwind CSS 与 Framer Motion 构建。
shadcn/ui
开创性的可复制 UI 组件集合,基于 Radix UI 与 Tailwind CSS 构建,赋予开发者 100% 代码所有权与无障碍支持。
前端组件架构与深度选型指南
深入剖析 Headless 模式、预设样式库与 Copy-Paste 源码拷贝的优劣对比与实战演进。
推荐优质开源资源
如果你发现或开发了优秀的 UI 组件、图标字体、动效库或 Agent 技能,欢迎向我们提交收录。