SmoothUI

为shadcn/ui生态补齐动效短板的React组件库，50+组件与27+区块均内置Motion/GSAP弹簧动画，通过`npx shadcn@latest add @smoothui/...`一行命令即可集成到现有shadcn项目。

核心能力：动效组件与页面区块

SmoothUI提供两类产出物：组件（Components）和区块（Blocks）。组件覆盖UI基础（Button、Accordion、Animated Input）、文本动画（Scramble Hover、Typewriter、Wave Text）、导航（Breadcrumb、Pagination）、AI交互（AI Input、AI Branch、AI Agent Avatar）以及过渡特效（Aperture Blur、SDF Blob、Noise Gate等20余种转场）。区块则包含Hero Grid、Pricing Simple、Pricing Modern、Pricing Creative、Logo Clouds、Stats等预构建的页面段落，可直接拖入项目使用。所有组件和区块均支持暗色模式，且已适配React 19的Server Components。

• Siri Orb：仿Siri动态波形组件，基于Motion弹簧物理
• Dynamic Island：仿iPhone灵动岛交互组件
• Number Flow：数字滚动动画，适合计数器或价格展示
• Power Off Slide：滑动关机效果组件
• Scrollable Card Stack：可键盘导航的卡片堆叠组件
• Clip Corners Button：切角按钮，含多种变体

安装与集成：三种方式，零摩擦

SmoothUI完全兼容shadcn/ui的安装范式。方式一：使用shadcn CLI直接添加，命令如`npx shadcn@latest add @smoothui/dynamic-island`；方式二：使用SmoothUI自有CLI，`npx smoothui-cli add header-1`；方式三：从官网文档手动复制源码。此外，SmoothUI提供公开REST API（`GET /api/v1/suggest`）和MCP Server，支持AI助手（如Cursor、Copilot）通过MCP协议自动搜索、解析依赖并安装组件，无需手动翻文档。

• shadcn CLI兼容：`npx shadcn add @smoothui/siri-orb`
• SmoothUI CLI：`npx smoothui-cli add pricing-2`
• 公开API：无需认证，返回结构化组件数据（JSON/纯文本），含OpenAPI规范
• 手动复制：官网每个组件/区块页面均提供完整源码

收费模式与开源承诺

SmoothUI采用混合授权模式。所有组件（Components）和基础区块（如Hero Grid、Pricing Simple）均为MIT开源，免费使用。高级区块（Pro/Scale套餐）需订阅：Pro套餐$19/月，Scale套餐$29/月。项目由Eduardo Calvo独立维护，通过GitHub Sponsors接受赞助以保持免费版本持续更新。第三方评测（gumi.ink）指出，截至2026年3月项目GitHub Star数为718，但组件质量不输大厂。

• 免费范围：50+组件、3个免费Blocks（Hero、Pricing Simple、Logo Clouds等）
• Pro套餐：$19/月，解锁更多Blocks
• Scale套餐：$29/月，适合团队使用
• 开源协议：MIT，可自由复制使用
• 维护者：Eduardo Calvo，同时维护Sparkbites、Codevator、ui-craft等工具

AI辅助开发与设计质量管控

SmoothUI是首个专为AI代理设计的组件库。其MCP Server和REST API使AI助手能直接搜索组件、解析依赖并执行安装。此外，项目附带名为「UI Craft」的CLI工具（`brew install --cask educlopez/tap/ui-craft`），内置「反Slop检测」——通过评分质量门和收敛循环，确保AI生成的UI符合设计品味，避免千篇一律的紫色渐变和玻璃态。

• MCP Server：AI代理可自动发现并安装组件
• REST API：`GET /api/v1/suggest`返回组件建议，含评分
• UI Craft：CLI工具，含反Slop检测和设计质量门
• 机器可读目录：组件数据以JSON/纯文本格式输出，适合LLM上下文窗口和RAG管道

常见问题

Q1：SmoothUI与shadcn/ui是什么关系？

A1：SmoothUI是shadcn/ui的动效扩展库，完全兼容shadcn的安装方式和设计模式。你可以通过`npx shadcn@latest add @smoothui/...`将SmoothUI组件直接安装到已有的shadcn项目中，无需修改现有配置。

Q2：SmoothUI的动画依赖哪些库？是否需要额外学习？

A2：动画引擎基于Motion（原Framer Motion）和GSAP，但开发者无需手动编写动画代码——所有动效已内置在组件中，通过Tailwind CSS类名即可调整。组件默认使用弹簧物理参数，并支持`prefers-reduced-motion`无障碍设置。

Q3：SmoothUI的Blocks（区块）如何定价？免费版够用吗？

A3：免费版包含3个Blocks（Hero、Pricing Simple、Logo Clouds等），足够个人项目或原型使用。Pro（$19/月）和Scale（$29/月）解锁更多高级区块，如Pricing Modern、Pricing Creative等。所有组件（Components）始终免费且MIT开源。

更多同类工具与网站,可在落地页组件分类继续挑选。

信息核实于 2026年7月,具体以官网为准。