300 个组件 · shadcn 注册表 · MIT 许可

shadcn/ui 动态图标

每个 useAnimations 图标都收录在 shadcn 注册表中。一条 CLI 命令就能把带类型的 React 组件添加到项目里，组件自带为图标设计的悬停、点击或循环交互，支持减少动态效果，颜色跟随您的主题。代码直接落在您的仓库中，和其他 shadcn/ui 组件一样。

添加图标

用图标的注册表网址运行 shadcn CLI：

npx shadcn@latest add https://useanimations.com/r/checkmark.json

import { AnimatedCheckmark } from '@/components/animations/checkmark';

<AnimatedCheckmark size={24} />

组件名为 Animated 加上 PascalCase 形式的图标 id（check-box → AnimatedCheckBox），文件位于 components/animations/<id>.tsx。CLI 还会添加共用的 components/use-animation.tsx 封装组件，并安装 react-useanimations；它自带播放器，无需 lottie-web。

使用注册表命名空间的简短写法

在 components.json 中添加一次注册表，之后就能按名称添加图标，一次可以添加多个：

{
  "registries": {
    "@useanimations": "https://useanimations.com/r/{name}.json"
  }
}

npx shadcn@latest add @useanimations/menu @useanimations/heart @useanimations/loading

注册表索引 /r/registry.json 列出了每一项的标题、类别和交互方式。

在 shadcn Button 中使用

组件接受与 UseAnimations 相同的属性。对于菜单图标这类开关，请传入 active，并把状态保存在按钮中；每当状态变化，图标都会播放动画：

npx shadcn@latest add https://useanimations.com/r/menu.json

"use client"

import { useState } from "react"
import { AnimatedMenu } from "@/components/animations/menu"
import { Button } from "@/components/ui/button"

export function MenuToggle() {
  const [open, setOpen] = useState(false)
  return (
    <Button
      variant="ghost"
      size="icon"
      aria-label={open ? "关闭菜单" : "打开菜单"}
      aria-expanded={open}
      onClick={() => setOpen(!open)}
    >
      <AnimatedMenu size={20} active={open} />
    </Button>
  )
}

图标跟随文字颜色，因此 text-primary 或 text-muted-foreground 就能给它们改色，深色模式也无需额外处理。更多属性和用法请参阅文档。

常见问题

shadcn/ui 动态图标是免费的吗？

是的。全部 300 个图标及组件代码都采用 MIT 许可证，可用于个人和商业项目。使用注册表不需要账号或 API 密钥。

shadcn CLI 会往项目里添加什么？

位于 components/animations/<id>.tsx 的图标组件、位于 components/use-animation.tsx 的共用 UseAnimation 播放器封装（作为注册表依赖，只添加一次），以及来自 npm 的 react-useanimations@^3.1.1。不需要 lottie-web：这个软件包自带 8 kB 的播放器。

这些组件能在 Next.js 服务端组件中使用吗？

可以。组件标记为 "use client"，只在浏览器中绘制动画，因此可以直接在服务端组件和页面中渲染，无需动态导入，也不用设置 ssr: false。

可以修改图标的外观和动效吗？

代码就在您自己的仓库里，可以随意修改。组件接受 UseAnimations 的属性：size、strokeColor、fillColor、interaction、active、autoplay、loop 和 speed。图标跟随文字颜色，因此 text-primary 或 text-muted-foreground 等 Tailwind 类名就能给它们改色。

添加图标

使用注册表命名空间的简短写法

在 shadcn Button 中使用

热门 shadcn/ui 图标

常见问题