如何在 Next.js 中集成 SmoothUI一步步完整图文教程【免费下载链接】smoothuiSmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Shadcn/ui and Motion项目地址: https://gitcode.com/gh_mirrors/sm/smoothuiSmoothUI是一套基于 React、Tailwind CSS 和 Motion 精心打造的平滑动画组件库与 Shadcn/ui 生态深度兼容可以让你用最短的时间为 Next.js 项目添加上百个生产级动画组件。本教程将带你从零开始在 Next.js 中集成 SmoothUI涵盖环境准备、一键安装、组件使用与常见问题排错即使你完全没接触过动画组件也能照着操作一次成功。SmoothUI 是什么为什么适合 Next.js 项目SmoothUI 的目标非常纯粹为开发者提供开箱即用的平滑动画 UI 组件。它内置了 Siri Orb、富弹窗RichPopover、滚动卡片堆叠、动态岛Dynamic Island、波浪文字、打字机文本等大量炫酷组件并且 组件原生支持亮色 / 暗色主题与动态换色⚡ 全部基于 MotionFramer Motion 的新一代库实现流畅动画♿ 自带无障碍支持与prefers-reduced-motion降级方案 组件自带依赖解析安装后即可运行无需手动补包由于 SmoothUI 本身就是官方 shadcn registry因此集成到 Next.js 的方式和安装普通 shadcn 组件一样简单这也是它被称为Next.js 动画组件库首选的原因。集成 SmoothUI 前的准备工作在开始集成之前请确认你的开发环境满足以下条件要求说明Node.js版本 ≥ 18Next.js 项目App Router 或 Pages Router 均可Tailwind CSS已正确配置建议 v4路径别名/*指向src/*shadcn 标准配置如果你还没有 Next.js 项目先执行下面的命令快速创建一个npx create-next-applatest my-smoothui-app创建完成后打开tsconfig.json确保存在路径别名配置否则安装的组件将无法解析导入路径{ compilerOptions: { paths: { /*: [./src/*] } } }在 Next.js 中安装 SmoothUI 组件的两种最快方法方法一使用 SmoothUI 官方 CLI推荐SmoothUI 提供了专用的命令行工具它会自动检测包管理器、解析依赖树并写入组件文件全程无需手动干预# 安装单个组件 npx smoothui-cli add siri-orb # 一次安装多个组件 npx smoothui-cli add rich-popover animated-input # 交互模式浏览并多选组件 npx smoothui-cli add # 查看全部可用组件 npx smoothui-cli list安装过程中CLI 会展示组件依赖树、检测你的包管理器npm / pnpm / yarn / bun并在文件冲突时询问是否覆盖非常贴心。方法二使用 shadcn CLI 安装SmoothUI 是官方认可的 shadcn registry因此你也可以直接用smoothui命名空间安装npx shadcnlatest add smoothui/siri-orb两种方式殊途同归组件最终会被写入项目的components/smoothui/目录并自动附带所需的工具函数如cn与 npm 依赖。在页面中使用 SmoothUI 组件图文实例安装完成后你就可以像使用普通 React 组件一样引入它们。以经典组件Siri Orb为例它是一颗由多层锥形渐变构成的动态小球会随 AI 状态待机、聆听、思考、输出实时改变动画节奏import { SiriOrb } from /components/smoothui/siri-orb; export default function Home() { return ( main classNameflex min-h-screen items-center justify-center SiriOrb size200px colors{{ bg: oklch(95% 0.02 264.695), c1: oklch(75% 0.15 350), c2: oklch(80% 0.12 200), c3: oklch(78% 0.14 280), }} animationDuration{20} / /main ); }再比如组合多个组件搭建一个交互式首页可以从components/smoothui/ui/下按需引入import { RichPopover } from /components/smoothui/ui/RichPopover; import { ScrollableCardStack } from /components/smoothui/ui/ScrollableCardStack; export default function Dashboard() { return ( div classNamespace-y-8 RichPopover / ScrollableCardStack items{[ { id: 1, name: SmoothUI, handle: smoothui, avatar: /a.jpg }, ]} / /div ); } 提示使用动画组件时记得在文件顶部加上use client因为动画依赖客户端运行时。安装后必看的常见问题与解决方法集成过程中如果遇到报错绝大多数都可以在下面的清单里找到答案1. 提示You are not authorized to access the item401这通常发生在 Vercel 预览部署环境中请改用生产环境地址配置 registry。2. 提示The item at ...registry.json was not found搜索命令可能不可用直接按组件名安装即可例如npx shadcnlatest add smoothui/siri-orb。3. 提示Cannot find module /lib/utils/cn说明路径别名缺失回到上文的tsconfig.json补上/*: [./src/*]即可。4. 提示Cannot find module clsx手动补装核心依赖pnpm add clsx tailwind-merge motion lucide-react更进一步浏览组件源码与更多玩法安装完组件后如果你想深入研究每个组件的实现细节可以克隆仓库阅读源码git clone https://gitcode.com/gh_mirrors/sm/smoothui在仓库中你可以找到组件源码packages/smoothui/components/如 siri-orb完整使用示例apps/examples/如 animated-tabs.tsx组件文档apps/docs/content/docs/components/如 siri-orb.mdx官网构建示例apps/docs/components/gallery/下的区块画廊组件总结三步让 Next.js 项目拥有丝滑动画回顾一下在 Next.js 中集成 SmoothUI 只需三步✅ 准备环境Node ≥ 18、Next.js 项目、配置/*路径别名✅ 一键安装npx smoothui-cli add 组件名或 shadcn CLI✅ 引入使用按需 import 组件享受丝滑动画带来的体验升级SmoothUI 用极低的上手成本换来了生产级的动画组件体验。无论你是想给个人博客加点活力还是为 SaaS 产品打造精致的着陆页它都能帮你把还不错的界面升级成让人惊艳的界面。现在就动手在你的 Next.js 项目里装下第一颗 Siri Orb 吧✨【免费下载链接】smoothuiSmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Shadcn/ui and Motion项目地址: https://gitcode.com/gh_mirrors/sm/smoothui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考