はじめに

データ密度の高いアプリ向けの SSOT 駆動 React + Tailwind デザインシステム。150+ コンポーネントを Pen / source / docs の3軸で検証。

60 秒で始める

パッケージを入れて、import して、置く。テーマの初期化も Provider のセットアップも要りません。

1インストール
```
npm install @gunjo/ui
```

2import して描画

import { Button } from "@gunjo/ui";

export default function Welcome() {
  return <Button>Hello GunjoUI</Button>;
}

3全コンポーネントを見る
Showcase で 150+ コンポーネントを 1 ページに俯瞰できます。
Showcase を開く

ライブプレビュー

GunjoUI は単一のソース・オブ・トゥルースを起点に構築されています。デザイントークンとコンポーネントバリアントは .pen デザインファイルを元に TypeScript 実装、仕様 JSON、ドキュメント登録へ同期され、すべてのプリミティブが Pen / source / docs の3軸で検証されます。ページ全体を .pen から完全自動生成するのではなく、設計データと実装・ドキュメントのずれを同期と検証で抑える仕組みです。

アクセシビリティのために Radix UI を、スタイリングに Tailwind CSS を採用。npm パッケージ @gunjo/ui として配布（現在 early alpha = 0.0.1-alpha.2、1.0 stable 前は API が変更される可能性あり）。

採用モード

どこまで「自分で持つ」かに応じて、2通りの使い方ができます：

依存としてインストール（推奨） — npm install @gunjo/ui。semver で更新を受け取り、安定後はバージョン固定。
コピー＆ペースト — props 越えのカスタマイズが必要なときは、特定コンポーネントを自分のリポジトリに取り込めます。どちらにせよ、コードはあなたのもの。

合うほうを選んでください。npm 経由のほうが早く、コピー経由のほうが完全な自由度が得られます。

どの道から始める？

目的に合わせて最短ルートを選んでください。

インストールする

@gunjo/ui を Next.js / Vite アプリに導入して 5 分で動かす。

インストール手順

コンポーネントを見る

150+ のコンポーネントをライブプレビュー付きで。

カタログを開く

実装例を見る

ダッシュボード、エディタ、カンバン、チャットなどの全画面リファレンス。

例を開く

導入計画

既存アプリ向けの移行手順、バージョンポリシー、peer-dep マトリクス。

採用ガイドを読む

内部リソース

コードベースと一緒にメンテされているリファレンス。