Kibo UI

shadcn/ui 向けカスタムレジストリ — 合成可能なコンポーネント群（npm: kibo-ui）

1 — 概要
プロジェクトの位置

Kibo UI は、shadcn/ui と同じ CSS 変数設計に乗せた、合成可能でアクセシビリティを意識したオープンソースの UI ブロック集である。中核の Radix ラッパーに加え、複数のヘッドレス実装を束ねた高機能コンポーネントを提供し、ボイラープレートを減らしつつレイアウトの自由度を保つことを目的にしている。

pnpmワークスペース
Turboビルドオーケストレーション
40+packages 配下の UI パッケージ
Nextドキュメントアプリ

公開ドキュメントとレジストリのエントリは kibo-ui.com。ソースは GitHub の shadcnblocks/kibo で管理されている。

2 — shadcn/ui との関係
役割の違い

shadcn/ui が Radix UI を中心としたプリミティブのコピー＆ペースト運用に寄せているのに対し、Kibo UI はカレンダー・ガント・エディタ・ドロップゾーンなど、よりアプリケーション寄りのパターンを幅広くカバーする。どちらも「コピーして自分のコードベースに取り込む」スタイルで、既存の shadcn テーマと衝突しにくいよう CSS 変数に揃えている。

shadcn プリミティブ → テーマ（CSS 変数） → Kibo UI ブロック → 画面実装
CLI: npm パッケージ名は kibo-ui。バイナリ kibo-ui でレジストリ連携などの補助コマンドが提供される（ルート package.json の bin 参照）。
3 — モノレポ構成
ディレクトリの骨格

ルートは pnpm workspace + Turborepo。apps/docs が Next.js ベースのドキュメント／レジストリ UI、packages/* が個別の UI モジュール、packages/shadcn-ui が共有の shadcn レイヤ、packages/typescript-config が TS 設定の共有となる。

apps/docs          Next.js ドキュメント・API ルート（MCP 用 transport など）
packages/          個別コンポーネント（calendar, editor, gantt, kanban, …）
packages/shadcn-ui 共有 shadcn 設定・hooks
packages/patterns パターン用メタ
scripts/           インデックス生成などの Node スクリプト
turbo.json         パイプライン定義
tsup.config.ts     バンドル設定
4 — パッケージ群（抜粋）
packages 直下の例

フォルダ名から推定できる用途の代表例。一覧の正は公式サイトのコンポーネント索引を参照すること。

パッケージ想定用途
calendar / mini-calendar日付選択・月表示 UI
gantt / kanbanスケジュール・ボード表示
editor / code-block / snippet編集・コード表示
combobox / choicebox / list選択・リスト入力
dropzone / image-crop / image-zoomファイル・画像操作
dialog-stack / deck / reel重ね表示・カルーセル系
credit-card / qr-code / rating決済・コード・評価 UI
contribution-graph / tree / tableデータ可視化・階層・表
theme-switcher / typography / marqueeテーマ・タイポ・テロップ
typescript-configワークスペース共通の TS 設定プリセット
5 — ツールチェーン
ルート package.json より
  • Node: 18 以上（engines）
  • パッケージマネージャ: pnpm 10.x（packageManager フィールド）
  • 品質: Biome（@biomejs/biome）と Ultracite（check / fix）
  • ビルド: turbo build、型付きバンドルに tsup
  • 依存の一括更新: bump-deps / shadcn 側は bump-ui スクリプト
公式・リポジトリ