一行命令解锁Amicroshadcn/ui Registry命名空间集成简单指南【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-AmicroAmicro--Micro-transitions是一个基于 Motion 打造的 React 微交互与动画组件库收录了 162 个入场过渡、悬停特效、文本动画与加载动画组件。本文将手把手教你通过shadcn/ui Registry 命名空间amicro对接该组件库只需在配置文件中加一行映射之后任何组件都能用一行命令安装进项目。为什么需要 shadcn/ui Registry 集成Amicro 采用的是copy-to-code代码复制模式组件不是以 npm 包的形式被引用而是把 TSX 源码直接写入你的项目零运行时开销、可随意修改。要打通这条流水线有两种方式方式命令形态适合场景直接 URL 安装npx shadcn add 完整 raw 地址偶尔装一两个组件命名空间映射推荐npx shadcn add amicro/组件名长期使用一行命令随心取命名空间方式的核心是让 shadcn CLI 把amicro/xxx这个短名字自动解析为 Amicro 仓库中对应的 registry.json 清单。第一步在 components.json 中声明 amicro 命名空间打开你项目根目录的components.jsonshadcn 项目初始化时自带在registries字段中加一行映射{ registries: { amicro: Amicro 仓库 registry 原始地址/registry/{name}.json } }要点说明{name}是占位符shadcn CLI 会自动把它替换成你实际要安装的组件名例如fade-in地址前缀指向 Amicro 的 registry/ 目录该目录下每个组件都有一份同名.json元数据如 registry/ui/entrance/fade-in.json 对应的组件源码在 registry/ui/entrance/fade-in.tsx完整的组件索引清单见 registry/registry.json共 162 个条目包含 155 个 UI 组件、5 个 Hooks 和 2 个工具库。第二步一行命令安装任意组件配置完成后直接按名字安装CLI 会自动拉取源码、写入依赖、放置到约定目录# 入场过渡组件 npx shadcn add amicro/fade-in npx shadcn add amicro/zoom-in # 悬停与文本动效 npx shadcn add amicro/tilt-card npx shadcn add amicro/text-reveal # Hooks 与预设工具 npx shadcn add amicro/use-scroll-progress npx shadcn add amicro/presets安装过程中CLI 会根据元数据自动处理依赖如framer-motion无需手动npm install。组件装到了哪里每个 registry 条目都声明了target字段例如fade-in的安装目标是components/amicro/fade-in.tsx。也就是说所有 Amicro 组件会统一落在components/amicro/目录下与项目原有组件清晰隔离方便管理与二次修改。162 个组件都包含哪些类别类别数量代表组件安装示例 入场过渡7fade-in、zoom-in、slide-leftnpx shadcn add amicro/fade-in✨ 文本动效4text-reveal、word-reveal、blur-textnpx shadcn add amicro/text-reveal️ 悬停交互4tilt-card、magnetic-button、glow-buttonnpx shadcn add amicro/tilt-card 光标特效3cursor-trail、spotlight、mouse-follownpx shadcn add amicro/spotlight 滚动动画3scroll-reveal、sticky-revealnpx shadcn add amicro/scroll-reveal⏳ 加载动画130apple-unlock、siri-wave、newtons-cradlenpx shadcn add amicro/siri-wave Hooks5use-scroll-progress、use-staggernpx shadcn add amicro/use-stagger 工具库2presets.ts弹簧预设、utils.tsnpx shadcn add amicro/presetsHooks 源码可在 registry/hooks/ 目录中直接浏览例如 use-scroll-progress.ts 实现了一个监听滚动进度的自定义 Hook。前置条件与常见问题环境要求来自 README.mdNode.jsv18.0.0React18或19Tailwind CSSv3或v4已安装motion或framer-motion常见问题components.json不存在先运行npx shadcn init初始化 shadcn再添加命名空间映射命名空间不生效检查registries拼写和 URL 中的{name}占位符是否保留不要手动替换掉想离线浏览全部组件可以克隆仓库本地预览git clone https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-仓库自带演示页面入口见 src/components/CliPage.tsx运行后即可在线预览全部动效确认满意后再安装到生产项目。小结整套流程只有三步在components.json的registries中注册amicro命名空间用npx shadcn add amicro/组件名一行命令安装组件落到components/amicro/目录源码在手随意定制。从此162 个经过精心调校的微交互组件都藏在一条命令背后让 React 页面的每一次入场、悬停与加载都自带高级感。【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考