mickadesign/fluid-functionalism

这是什么？

核心功能

• 01可通过 shadcn CLI 按注册表名称或 URL 安装。
• 02基于原语的组件同时提供 Radix 和 Base UI 版本，API 保持一致。
• 03采用弹簧动效，列表中的悬停高亮在条目间平滑移动。
• 04借助 Inter 可变字体的 optical size 轴，字重变化不会引起布局偏移。
• 05图标插槽默认使用 Lucide，也可替换为其他图标库。

适用场景

• 基于 shadcn/ui 构建 Next.js 或 React 应用，需要细致的悬停和过渡效果。
• 搭建聊天界面，包括输入框、消息气泡和思考状态指示器。
• 制作带可拖拽侧边栏、命令菜单或设置弹窗的应用外壳。
• 项目已使用 Base UI 或 Radix，希望保持原有底层库不变。

快速上手

1. 1

   创建一个已安装所有组件的新 Next.js 应用

   npx shadcn@latest create -n my-app -t next https://www.fluidfunctionalism.com/r/starter/default.json
2. 2

   在现有项目中添加 Fluid Functionalism 注册表

   npx shadcn@latest registry add @fluid
3. 3

   按注册表名称安装组件

   npx shadcn@latest add @fluid/button

使用前须知

• !组件以 shadcn/ui 源代码形式安装到你的项目中，而不是作为带版本的包发布。
• !使用 --overwrite 时，会替换同名的原有 shadcn 文件。
• !字重动画需要同时加载 Inter 的 wght 和 opsz 轴。

收录于专题

标签

常见问题

fluid-functionalism 是什么？

基于 shadcn/ui 的组件注册表，提供带弹性悬停动效的精致 UI 组件，支持 Radix 和 Base UI 两种版本。 Fluid Functionalism 是一个基于 shadcn/ui 的组件注册表，包含 UI 组件、共享的交互系统以及由组件组合而成的区块。动效以弹簧（spring）而非固定时长为基础，每个过渡都用来让状态变化更容易被理解。列表中的悬停高亮会在条目之间平滑滑动，字重变化也不会带动周围布局移动。

fluid-functionalism 可以免费使用吗？用的什么许可证？

fluid-functionalism 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

fluid-functionalism 还在维护吗？

活跃维护中。fluid-functionalism 最近一次提交是在 2026年11月6日。

fluid-functionalism 适合用来做什么？

基于 shadcn/ui 构建 Next.js 或 React 应用，需要细致的悬停和过渡效果。 搭建聊天界面，包括输入框、消息气泡和思考状态指示器。 制作带可拖拽侧边栏、命令菜单或设置弹窗的应用外壳。 项目已使用 Base UI 或 Radix，希望保持原有底层库不变。

fluid-functionalism 怎么安装和运行？

创建一个已安装所有组件的新 Next.js 应用: npx shadcn@latest create -n my-app -t next https://www.fluidfunctionalism.com/r/starter/default.json 在现有项目中添加 Fluid Functionalism 注册表: npx shadcn@latest registry add @fluid 按注册表名称安装组件: npx shadcn@latest add @fluid/button

在哪里获取 fluid-functionalism？

源代码和安装说明在 GitHub 上：https://github.com/mickadesign/fluid-functionalism