用途:Kanpeki 是面向 React 项目的复制粘贴式 UI 组件库,适合需要无障碍组件并希望直接掌控组件源码的场景。组件不通过 npm 安装,而是用 shadcn CLI 复制到项目中,代码归使用者所有。
主要能力:基于 React Aria Components 提供无障碍支持,用 CVA beta 定义变体,用 Tailwind CSS 4.1 负责样式。组件分两类:简单组件为单一导出,如 import { Button } from "~/components/ui/button";多部件组件使用命名空间导出,如 Dialog.Root、Dialog.Content。多部件组件包括 Accordion、Breadcrumb、Calendar、Card、Carousel、Chart、Combobox、DatePicker、Dialog、Drawer、Field、Menu、Select、Sidebar、Table、Tabs、Toast、Tooltip 等。表单采用 Form > Field > Input 三层结构,Field.Root 的 render prop 连接 React Aria 表单原语,实现标签关联与校验,并支持 React Hook Form、TanStack Form 或原生 HTML 校验。
使用方式:先安装依赖、创建 ~/lib/cva.ts、配置 globals.css,再添加组件,例如 npx shadcn@latest add @kanpeki/button,组件会复制到 ~/components/ui/<name>/。样式通过 className 覆盖或直接编辑 styles.ts。
限制与注意:交互组件需 "use client";cva 应从 ~/lib/cva 导入而非 "cva";路径别名使用 ~/ 而非 @/;按压状态用 pressed: 而非 active:;React Aria 组件上需用 composeRenderProps 以支持状态选择器。文档见 https://kanpeki.vercel.app。具体收费、平台与效果资料暂未提供。