Kibo UI

Kibo UI 是构建在 shadcn/ui 之上的自定义组件注册表，提供甘特图、看板、协作画布、AI 聊天原语等 41 个高级组件，解决 shadcn/ui 缺少复杂交互组件的问题。

核心功能

Kibo UI 提供超出 shadcn/ui 基础原语的功能型组件，每个组件自带业务逻辑而非仅样式。

• 甘特图: 支持多时间跨度（2025-2027）和任务依赖关系，内置日期选择器
• 看板: 可拖拽列与卡片，适用于项目管理场景
• 协作画布: 基于实时协同的在线白板，支持多用户编辑
• AI 聊天原语: 预构建聊天输入框与消息列表，适配 AI 对话界面
• 颜色选择器: 模仿 Figma 取色器交互，支持色值选择
• 图片缩放: 鼠标悬停/点击放大图片细节
• 二维码生成: 从字符串生成 QR 码
• 代码块: 语法高亮、行号显示、一键复制
• 文件拖放区: 限制文件类型（image/*）与大小（1KB-10MB）
• 跑马灯: 水平滚动展示列表项

与 shadcn/ui 的关系

Kibo UI 不是替代品，而是 shadcn/ui 的扩展层。它复用 shadcn/ui 的 CSS 变量主题系统，组件自动适配亮/暗模式，并通过 kibo-ui CLI 或 shadcn CLI 安装。

• 安装命令: npx kibo-ui@latest add 组件名（如 gantt）
• 组件导入路径: @/components/ui/kibo-ui/组件名
• 主题继承: 使用与 shadcn/ui 相同的 CSS 变量，无需额外配置
• 可组合设计: 组件接受原始 HTML 属性，支持嵌套与扩展

内容规模与社区

截至官网数据，Kibo UI 包含 41 个组件、28 个预构建块、1101 个模式，GitHub 星标 3.9K。社区贡献活跃，由 Hayden Bleasel 维护。

• 组件: 41 个（含公告、头像堆叠、日历、信用卡片、编辑器等）
• 块: 28 个（表单、定价、团队、FAQ、协作画布等）
• 模式: 1101 个（可直接复制使用的 UI 模式）
• GitHub: 3.9K 星标，开源协议永久免费
• 社区评价: 被用户称为“shadcn/ui 缺失的部分”（Arthur Brito）

适合谁用

面向使用 React/Next.js + Tailwind CSS 的开发者，尤其是需要快速集成复杂交互但不想从头造轮子的团队。

• 企业仪表盘: 用甘特图、看板、数据表构建管理后台
• AI 应用: 借助 AI 聊天原语快速搭建对话界面
• 设计系统: 基于可组合组件创建统一的设计语言
• 协作工具: 利用协作画布实现实时多用户编辑

常见问题

Q1：Kibo UI 的甘特图组件依赖哪些库？

A1：甘特图组件需额外安装日期处理库（如 date-fns），官网示例中使用了 2025-2027 的时间跨度与任务依赖关系。

Q2：Kibo UI 能否与现有 shadcn/ui 项目无缝集成？

A2：可以。Kibo UI 使用与 shadcn/ui 相同的 CSS 变量主题，组件自动适配亮/暗模式，安装后可直接导入使用，无需修改现有主题配置。

Q3：Kibo UI 的协作画布组件支持哪些实时功能？

A3：协作画布支持多用户实时协同编辑，基于 WebSocket 实现，适用于在线白板、设计评审等场景。

更多同类工具与网站,可在落地页组件分类继续挑选。

信息核实于 2026年7月,具体以官网为准。