SmoothUI：让动效变得优雅的 React 组件库

最近发现一个小众但精致的 React UI 组件库 —— SmoothUI，虽然 Star 数只有 718，但质量完全不输大厂出品。

项目简介

SmoothUI 是一套精心设计的 React 组件集合，主打「平滑动画」体验。它基于 React + Tailwind CSS + Motion 构建，所有组件都内置了丝滑的过渡效果。

GitHub: https://github.com/educlopez/smoothui

核心特点

• 开箱即用的动画 — 基于 Motion，无需额外配置
• Tailwind CSS 深度集成 — 样式自定义极其方便
• 暗色模式支持 — 组件默认支持 light/dark 切换
• TypeScript 类型完备 — 代码提示友好
• shadcn/ui 兼容 — 可以用 shadcn CLI 直接安装

安装方式

方式一：SmoothUI CLI（推荐）

npx smoothui@latest add button

方式二：shadcn CLI

npx shadcn add https://smoothui.dev/r/button.json

方式三：手动复制

直接去官网文档复制源码，零依赖安装。

组件一览

类别	组件
UI 基础	Button, Card, Input, Badge
交互组件	Modal, Drawer, Tooltip, Dropdown
布局组件	Grid, Stack, Container
工具组件	Skeleton, Spinner, Toast

每个组件都自带优雅的入场动画和交互反馈。

使用示例

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

export default function Page() {
  return (
    <Card className="p-6">
      <h2 className="text-xl font-bold mb-4">欢迎使用 SmoothUI</h2>
      <Button variant="primary">点击体验动效</Button>
    </Card>
  );
}

Button 点击时的涟漪效果、Card 的悬浮抬升动画，都是开箱即用的。

为什么推荐它？

1. 小而精 — 不追求大而全，每个组件都打磨到位
2. 文档友好 — 官网有完整的组件演示和 Props 说明
3. 持续更新 — 最近 3 天前还有提交
4. MCP 支持 — 甚至支持 AI 助手通过 MCP 协议调用

适合场景

• 需要快速搭建精致界面的 side project
• 对动画有追求，但不想自己写 Motion 代码
• 已经在用 shadcn/ui，想扩展更多动效组件

---

如果你也厌倦了枯燥的静态组件，不妨试试 SmoothUI，让界面动起来。