R
shadcn 注册表 · 22 个稀有组件

稀有、开箱即用的组件与动画

每个组件都用 Motion 驱动动画，遵循 prefers-reduced-motion，并且能通过一条命令直接安装到你的代码库。代码归你所有，没有需要依赖的包，任何样式都可以自定义。

npx shadcn@latest add swamimalode07/rare-ui/fluid-orb

点击右侧图标即可复制，然后直接粘贴到终端。

浏览全部组件rareui.com
22 个

开箱即用的组件

1 条

安装命令，仅此一条

0 个

需要长期依赖的包

100%

代码归你所有

Capabilities

它不只是「好看」

Rare UI 把最难写的那部分交互——物理感、形变、状态过渡——做成可以直接安装的源码。下面这六件事，是它在工程层面的取舍。

一条命令，装进你的代码库

走标准 shadcn CLI。组件以源码形式落到 components/ui，不引入任何需要长期依赖的封装包，也不存在版本锁定。

代码归你所有

没有黑盒组件、没有运行时包装层。打开文件就能改，任意样式、任意结构，改坏了也只是你自己的分支。

Motion 驱动的动画

弹簧、布局动画、共享元素过渡全部由 Motion 完成，动效不是后期贴上去的装饰，而是组件本身的一部分。

遵循 prefers-reduced-motion

所有动画都会读取系统的减少动效设置，自动降级为瞬变，同时保留完整的语义与焦点管理。

一条色驱动整套主题

CodeBlock、TaskList、VoiceNote 等等都接受任意 hex 强调色，内部自行推导出完整的明暗色阶。

与 shadcn 体系天然兼容

组件遵循同样的注册表协议、别名约定与 CSS 变量主题，可以直接放进任何已经使用 shadcn 的项目。

每个组件都真的能用鼠标玩

下面这张清单是组件本身（不是截图）。勾选任意一条，它会划掉并自己滑到列表底部。

弹簧物理，不靠固定时长堆关键帧
TypeScript 类型完整，props 有文档注释
Canvas / WebGL 承担重动效，DOM 保持轻量
开源仓库可直接提 issue 与 PR
MIT + Commons Clause + 署名要求

Live showcase

这些全都是实时运行的组件

没有 GIF、没有截图。你可以拖、可以点、可以输入——包括 WebGL 光球和重力场。

查看全部 22 个组件
待机

点阵光球

MatrixOrb

idle / listening / thinking 三态之间平滑过渡，适合做语音入口。

详情

重力字母

GravityLetters

字母会真的掉下来并堆叠，支持自定义字形与重力参数。

详情
正在生成画面…

网格揭示

GridReveal

网格随进度分裂，图片到位后无缝揭示，专为 AI 生成场景设计。

详情
小时
分钟

时长选择器

DurationPicker

gooey 形变 + squircle 圆角，把枯燥的时长输入做成一个有手感的控件。

详情

点击按钮打开 emoji 面板

Emoji 反应

EmojiReaction

Apple emoji 面板，选中后会有副本从按钮里飘出来。

详情

步骤播放器

StepPlayer

iOS 风格分段进度，当前步骤拉伸成正在填充的进度条。

详情

点击按钮打开抽屉，再在内部的多个视图之间来回切换。

家族抽屉

FamilyDrawer

底部抽屉在多个视图之间形变切换，高度自适应。

详情
hero.tsx
import FluidOrb from "@/components/ui/fluid-orb"


export function Hero() {
  return (
    <FluidOrb size={220} color="#fc4c01" />
  )
}

代码块

CodeBlock

传代码和一个 hex，整套语法配色由这一条色推导出来。

详情

Categories

按场景找组件

视觉与动效

5 个

WebGL、Canvas 与粒子级的视觉表现，开箱即有质感。

导航

5 个

带物理反馈的导航与阅读进度，选中状态自己会说话。

交互控件

8 个

把常见的表单与操作控件，做成 iOS 级别的动效细节。

数据展示

2 个

让数字与热力图动起来，数据不再是一堆静态文本。

布局与内容

2 个

抽屉、代码块等结构性组件，同样由一条强调色驱动。

Quick start

两步就能用上

如果你的项目已经用了 shadcn，那 init 这步都可以跳过。CLI 会自动带上组件所需的依赖、写入文件、并合并 aliases。

  1. 1

    安装组件

    把 {component-name} 换成组件名，例如 fluid-orb、otp-input。

  2. 2

    直接 import

    组件会落在 @/components/ui 下，不需要额外的 provider 或注册代码。

  3. 3

    按需改样式

    源码就在你的仓库里，改颜色、圆角、节奏都可以，不会影响上游。

终端
# 1. 用 shadcn CLI 安装任意组件
npx shadcn@latest add swamimalode07/rare-ui/fluid-orb


# 2. 直接在页面里使用
import FluidOrb from "@/components/ui/fluid-orb"


export default function Page() {
  return <FluidOrb size={220} color="#fc4c01" />
}

Theming

换一个 hex，整套视觉跟着换

点下面的色点试试。光球与右侧代码块的语法配色都来自同一个值——这就是 Rare UI 的定制方式：不是覆盖一大串变量，而是给它一条色。

当前强调色

#fc4c01

brand.tsx
import FluidOrb from "@/components/ui/fluid-orb"


// 换一个 hex，整套视觉就跟着换
export function Brand() {
  return <FluidOrb size={140} color="#fc4c01" />
}

Run locally

把它跑在本地

仓库本身就是注册表的宿主项目：组件位于 components/ui，文档站就建在它上面。 修改组件或 registry.json 之后，重新构建一次注册表输出即可。

本地开发时建议先生成一遍注册表，这样 /r/[name].json 与 CLI 拉取到的内容保持一致。

终端
git clone https://github.com/swamimalode07/rare-ui.git
cd rare-ui
npm install
npm run dev


# 组件位于 components/ui
# 修改组件或 registry.json 后，用下面的命令重建注册表输出
npm run registry:build

License

宽松使用，保留署名

采用 MIT 许可证，附带 Commons Clause 与署名要求。你可以把它用在任何项目里， 包括商业与闭源项目，只有两件事不能做。

可以自由使用

MIT 许可证。个人项目、商业项目、闭源项目都可以使用、修改、发布这些组件。

必须保留署名

任何使用了 Rare UI 组件的项目，都要以可见链接指向 rareui.com 的方式署名，放在页脚、关于页、致谢界面或 README 中，并保留源码里的版权声明。

不得转售或转授权

不允许单独、打包或移植到其他框架之后，出售、再许可或重新分发组件本身。

品牌不在许可范围内

Rare UI 的名称、Logo 与站点设计不包含在许可证涵盖范围之内。

本站已经按许可要求在页脚保留了指向 rareui.com 的署名链接。你在自己的项目里也需要这样做。

阅读完整许可证

Sponsors

Rare UI 是免费的，赞助让它保持免费

Runable钻石赞助商
让 Rare UI 保持免费。
PrivateAlps钻石赞助商
让 Rare UI 保持免费。

各档位详情见 rareui.com/sponsors。

FAQ

常见问题

Rare UI 和普通组件库有什么区别？+

它不是 npm 依赖，而是 shadcn 注册表。安装后组件源码直接进入你的仓库，你拥有全部代码。组件本身也更偏向「稀有」的交互：WebGL 光球、重力场、gooey 形变、贡献热力图这类平时要自己从零写的效果。

需要额外安装动画库吗？+

不需要手动处理。注册表条目的 dependencies 会在安装时自动带上，例如 motion、vaul、prism-react-renderer。你只需要正常使用 shadcn CLI。

能在 Next.js 之外的框架里用吗？+

可以。组件是标准的 React + TypeScript，样式来自 Tailwind CSS。shadcn 本身支持多种框架模板，只是本示范站用 Next.js App Router 搭建。

支持深色模式和中文吗？+

支持。所有组件都基于 CSS 变量主题，跟随 .dark 类切换；中文文案、字体栈和排版都不需要额外配置。

动效会影响性能或无障碍吗？+

重动效的组件（光球、重力场、热力图）使用 Canvas / WebGL，不产生大量 DOM 节点；同时全部读取 prefers-reduced-motion，在减少动效时自动降级。

现在就从 22 个组件里挑一个开始

npx shadcn@latest add swamimalode07/rare-ui/fluid-orb
打开组件总览