菜单
比较 shadcn/ui、HeroUI、Material UI、UI TripleD、Tailark UI、ReUI、shadcnblocks、Kokonut UI，并维护 pnpm + React 展示项目。用于 UI 组件库选型、风格页面规划、shadcn 生态组件库比较、React 页面展示框架扩展。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/DawnMoon1542/agents-skills --skill ui-component-library-showcase命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | ui-component-library-showcase |
| description | 比较 shadcn/ui、HeroUI、Material UI、UI TripleD、Tailark UI、ReUI、shadcnblocks、Kokonut UI，并维护 pnpm + React 展示项目。用于 UI 组件库选型、风格页面规划、shadcn 生态组件库比较、React 页面展示框架扩展。 |
| metadata | {"tags":"react, ui-components, shadcn, material-ui, heroui, tailwind, design-system"} |
使用本 skill 处理以下任务：
showcase/ React 展示项目。展示项目位置：ui-component-library-showcase/showcase
技术栈：
常用命令：
cd /Users/dawnmoon/.agents/skills/ui-component-library-showcase/showcase
pnpm install
pnpm test
pnpm typecheck
pnpm build
pnpm dev
页面文件：
| 组件库 | 页面文件 |
|---|---|
| shadcn/ui | src/pages/showcases/ShadcnUiPage.tsx |
| HeroUI | src/pages/showcases/HeroUiPage.tsx |
| Material UI | src/pages/showcases/MaterialUiPage.tsx |
| UI TripleD | src/pages/showcases/UiTripledPage.tsx |
| Tailark UI | src/pages/showcases/TailarkUiPage.tsx |
| ReUI | src/pages/showcases/ReUiPage.tsx |
| shadcnblocks | src/pages/showcases/ShadcnblocksPage.tsx |
| Kokonut UI | src/pages/showcases/KokonutUiPage.tsx |
共享数据：src/data/libraries.ts
页面注册：src/pages/showcases/registry.ts
| 组件库 | 类型 | 适合 | 不适合 |
|---|---|---|---|
| shadcn/ui | 源码分发基础组件系统 | 自建设计系统、需要源码所有权、shadcn registry、AI 辅助页面生成 | 只想安装 npm 包并由上游托管升级的团队 |
| HeroUI | 运行时 React 组件库 | 快速构建现代 React 应用、需要 React Aria 可访问性基础、偏好圆润动效视觉 | 必须完全拥有组件源码、严格 Material Design 项目 |
| Material UI | 成熟企业级 React 组件库 | 企业后台、管理系统、复杂表单、数据密集界面、长期生态稳定性 | 需要强品牌差异化且不想保留 Material Design 视觉痕迹 |
| UI TripleD | shadcn 动效组件与 blocks registry | 动效 landing page、hero、pricing、展示型页面、shadcn 项目扩展 | 严肃后台控件系统、禁用 Motion 的项目 |
| Tailark UI | shadcn 营销页面 blocks | SaaS 官网、创业项目、产品页、品牌营销页、bento feature | 复杂后台、表格密集应用、需要传统组件包升级 |
| ReUI | 企业级 shadcn registry 与组件扩展 | shadcn 中后台、Data Grid、Filters、Upload、Kanban、Sortable | 只需要少量营销区块、不使用 Tailwind 或 shadcn |
| shadcnblocks | shadcn blocks 与组件目录 | 大量页面区块、组件变体、搜索式挑选、复制或 registry 安装 | 需要高度统一单一设计语言且不想筛选变体 |
| Kokonut UI | 动画化 shadcn/Tailwind 组件集合 | AI 产品页、动画按钮、交互卡片、现代产品体验页 | 禁用 Motion、复杂企业后台、极度克制的规范视觉 |
定位：不是传统运行时组件库，而是组件源码分发和构建设计系统的方法。它提供组件源码、CLI、registry schema 与跨框架分发能力。
适合：
页面风格提示：中性底色、清晰边框、组合式 primitives、设计 token 面板、源码所有权叙事。
来源：
定位：原 NextUI，现代 React UI 库，基于 React Aria Components 与 Tailwind CSS v4，强调可访问性、默认美观和动画细节。
适合：
页面风格提示：圆润组件、柔和阴影、明亮 focus ring、暗色模式友好、轻量动效。
来源：
定位：MUI Core 中的 Material UI，成熟 React 组件库，实现 Google Material Design，配套主题、设计工具和 MUI X 扩展生态。
适合：
页面风格提示：Material elevation、状态层、规范表单、数据表、主题色与企业信息密度。
来源：
定位：shadcn/ui 与 Framer Motion 生态中的组件、motion blocks 和 landing page 模板集合。公开资料中常见写法是 UI TripleD，用户也可能写作 UI Tripled。
适合：
页面风格提示：大视觉焦点、运动轨迹、模板卡片、动态 hero、营销页面节奏。
来源：
定位：围绕 shadcn/ui 和 Tailwind CSS 的营销网站区块系统，强调产品页、landing page、feature、pricing、品牌页面。
适合：
页面风格提示：非对称 hero、bento feature、产品插画、高留白、清晰转化区。
来源：
定位：面向 shadcn 项目的组件和 blocks registry，支持 Base UI 与 Radix UI 版本，覆盖 Data Grid、Filters、File Upload、Kanban、Sortable 等复合组件。
适合：
页面风格提示：数据视图、过滤器、上传、看板、复杂控件组合、应用级密度。
来源：
定位：大量 shadcn UI blocks 与组件目录，支持下载、复制和 shadcn registry 安装，覆盖基础组件和页面区块。
适合：
页面风格提示：搜索目录、分类筛选、区块预览卡片、安装入口、shadcn 中性系统气质。
来源：
定位：开源 React 组件集合，基于 Tailwind CSS、shadcn/ui 和 Motion，强调现代视觉、交互动效与 shadcn CLI 安装。
适合：
页面风格提示：粒子按钮、浮动卡片、AI 输入框、动效背景、强交互组件预览。
来源：
src/data/libraries.ts 中的 LibraryProfile 数据契约稳定。pnpm add 安装。pnpm test、pnpm typecheck、pnpm build。