有人为 shadcn/ui 做了 75 个动画组件，开源免费，复制粘贴就能用

用 shadcn/ui 搭界面的人应该有这种感受：组件质量高、定制方便，但大多数组件都是静态的。想加一点渐入动效、悬停光晕、背景粒子，要么自己写 Framer Motion，要么找一堆零散的 demo 拼凑。

cult/ui 就是为了解决这件事而存在的。它是一套专门为 shadcn/ui 设计的动效组件扩展库，4.2k GitHub Star，MIT 协议，免费可商用。

它是怎么工作的

cult/ui 不是传统意义上的 npm 包。你不会在 package.json 里看到 @cult-ui/components 这种依赖。

它的分发方式和 shadcn/ui 本身一模一样：源码归你所有。每个组件的 TypeScript 代码直接复制进你的项目，你可以随意修改，不受版本升级的干扰。

这个思路有它的道理。动效组件往往需要和项目的设计系统深度结合，一旦封进 npm 包，定制反而麻烦。直接拿到源码，改颜色、改时长、改曲线都是一行的事。

技术栈上，cult/ui 使用 Tailwind CSS v4 和 TypeScript，底层依赖 Framer Motion 做动画（视具体组件而定），与 shadcn/ui 的技术路线完全一致。

75+ 组件覆盖哪些场景

组件按用途大致可以分成几类：

视觉效果类：背景动画（渐变、粒子、噪声）、光晕特效、文字动效（逐字出现、模糊渐入、打字机）。这类组件用在 Landing Page 的首屏最多，几行代码就能拉开质感差距。

卡片与容器类：带悬停光效的卡片（Magic Card 效果）、边框动画、3D 视差卡片。常见于产品展示区、功能介绍模块。

交互控件类：动效按钮、滑块、切换组件。比标准 shadcn 控件多了进入/离开动画，适合需要强调操作反馈的场景。

营销组件类：标签徽章、公告栏、特性展示网格。这些偏向 SaaS 官网或产品落地页的排版需求。

每个组件页面都有实时预览和完整代码，可以先看效果再决定要不要用。

如何上手

前提条件：项目需要已经完成 shadcn/ui 的初始化，并安装了 Tailwind CSS v4。

如果还没初始化，先跑一下：

pnpm dlx shadcn@latest init

安装单个组件有两种方式：

方式一：通过 shadcn CLI（推荐）

在 components.json 中注册 cult/ui 的注册表地址，然后用 shadcn 命令直接安装：

npx shadcn@beta add @cult-ui/text-gif

把 text-gif 替换成你需要的组件名即可。命令会把组件源码下载到你项目的 components/ui/ 目录下。

方式二：手动复制

进入 cult-ui.com 对应组件页，直接复制源码文件到项目里。适合只需要一两个组件、不想改配置的情况。

安装完成后直接引用：

import { TextGif } from "@/components/ui/text-gif"
 
export default function Hero() {
  return (
    <TextGif text="Build faster" />
  )
}

cult/ui 的组件 API 设计和 shadcn 保持一致，习惯了 shadcn 写法的话基本没有学习成本。

免费版之外还有什么

cult/ui 的免费组件是核心产品。在此之外，项目还提供了两条付费线：

Cult Pro：高级营销组件，主要是更复杂的动效 Block，比如接入 Gemini API 的图像编辑组件、多步骤 AI Agent 交互模式等。适合在 cult/ui 免费组件基础上有更深定制需求的团队。

AI SDK Agents：92+ 个 AI Agent 交互模式，包含竞品分析 Agent、数据分析 Agent、品牌设计提取 Agent 等完整实现，以及 4 套包含鉴权、支付、数据库的全栈 Next.js 模板。这部分面向需要快速搭建 AI 产品的开发者，和动效组件是两条相对独立的产品线。

如果只是想给 shadcn 项目加点动效，免费的 75+ 组件已经够用。

写在最后

cult/ui 解决的是一个很具体的问题：shadcn/ui 生态里缺少高质量的动效组件。它的选择不是另起炉灶，而是以 shadcn 的方式（复制源码、完全可控）做动效扩展，因此几乎没有接入成本。

它不是银弹。如果项目需要高度定制的动效逻辑，或者团队有能力自己封装 Framer Motion，cult/ui 的价值会打折扣。但对于多数用 shadcn 搭建 SaaS 产品或官网的场景来说，从这里直接取用组件是比从零写省力的选择。

框架兼容方面，Next.js、Astro、Remix、Gatsby 均支持，React Server Components 下需要加 "use client" 指令——这和 shadcn/ui 的使用方式完全一致。

GitHub：https://github.com/nolly-studio/cult-ui (opens in a new tab)