Library kokonutui 基于shadcn的Tailwind组件注册表

一、项目介绍

shadcn/ui 的「复制即拥有」理念很受欢迎，但官方注册表里的组件终究有限，想要更多精致、动效到位的交互组件，要么自己写，要么去网上东拼西凑、质量没保障。团队做产品界面时，常常卡在「基础组件有，亮点组件没有」。
Kokonut UI 是一个 shadcn/ui 注册表，提供一批用 Tailwind CSS 与 Motion 打造的精致组件（如滑动确认、动画卡片等），通过 shadcn CLI 一键加进你的代码库。它不发布成黑盒 npm 包，而是把组件源码直接放进你的项目，可改、可定制，和 shadcn 工作流完全一致。

二、项目基本信息

三、核心优势

• shadcn 兼容：作为注册表，源码直接进项目可改
• 精致动效：组件用 Tailwind + Motion，观感现代
• 一键引入：npx shadcn add 即可拿到组件
• 框架友好：基于 React，和现有 shadcn 项目无缝衔接
• MIT 协议：开源可商用

四、适用场景

适合已经或打算用 shadcn/ui + Tailwind 做 React 产品界面、想要更多亮点交互组件的开发者。希望组件源码可控、不被黑盒 npm 绑定的团队尤为合适。

五、安装教程

当前最新版本 latest。按下方命令安装：

# 1) 在 components.json 注册命名空间：
# { "registries": { "@kokonutui": "https://kokonutui.com/r/{name}.json" } }
# 2) 添加任意组件：
npx shadcn@latest add @kokonutui/slide-to-confirm

常见报错：依赖缺失时先升级对应运行环境（Node、Python、.NET、Go、Java、Rust、Bun、JDK）；网络超时多为镜像或代理问题，可重试或换源；Docker 相关命令需已安装并启动 Docker 服务；涉及 API Key 的服务请提前在环境变量或配置文件中填好。

六、使用示例

下面是一段可直接参考的真实示例：

import SlideToConfirm from "@/components/kokonutui/slide-to-confirm";

export default function Page() {
  return (
    <SlideToConfirm
      onConfirm={() => console.log("已确认")}
      label="滑动以确认"
    />
  );
}

七、常见问题

问：和 shadcn/ui 冲突吗？答：不冲突，它是 shadcn 注册表，组件与你的 shadcn 项目同工作流。问：需要 React 吗？答：是的，Kokonut UI 基于 React + Tailwind + Motion。

八、总结

kokonutui 用清晰的设计，把把界面能力做成可复用组件这件事从重复劳动变成了可复用、可维护的工程能力。它不追求大而全，而是把核心痛点解决得足够扎实，这正是日常开发与团队落地时最需要的那种工具。如果你也在被同类问题困扰，不妨按上面的安装与使用步骤试一试，把它接进自己的工作流。