はじめに

BoardUIの概要、インストール方法、AIエージェントの使い方、色と文字の仕組みまで。ゼロから動くプロジェクトを作るために必要な情報を、1ページにまとめています。

Reactデザインシステムエージェントインターフェイス用

BoardUIはReactの設計システムです。 104 ユニークなコンポーネントを含む 19 データチャート、プラス 10 プロテンプレートと400以上のデザイントークン、Figmaでデザインされています。

M

メルトカン・エスメルゲル

生年月日
1997年7月28日
性別
男性
血液型
A rh+
かかりつけ医
マテウス・クラークソン

歩数

31,600

総ステップ
6/29 - 7/5

睡眠スコア

とても良い

6/29 - 7/5
98
時間: 7h 50m
49/50
就寝時間: 20分早め
29/30
中断: 5分の覚醒
20/20

活動量の多い日

32,459

総ステップ
1月

1月

2月

3月

4月

5月

6月

7月

8月

9月

10月

11月

12月

活動内容

ふるまい
1,592 kcal
トレーニング
1h 45m
ランニング
5.2 km

重要なアラート

12

今週の予定
6/29 - 7/5

高い心拍数

午前8時59分から10分間、活動していないと思われる間に心拍数が120 BPMを超えました。

7月4日

医療ID

医療用IDに緊急連絡先とアレルギー情報が更新されました。

7月3日

実験室の結果は準備が整いました

マテウス・クラークソン博士が注文した最新の血液パネルが戻ってきます - コレステロールとグルコースは正常な範囲内にあります。

7月3日

薬用リマインダー

あなたはMetoprololのあなたの9:00 AMの線量を逃しました。あなたの次の線量が近くなければできるだけ早くそれを取って下さい。

7月2日

不規則な眠り

あなたの就寝時間は、あなたの睡眠スコアに影響を与えることができる最後の7夜3で2時間以上シフトしました。

6月30日

低い血酸素

睡眠中、血中酸素が短時間93%まで低下しました。

6月29日

なぜBoardUI

ソースコードはあなたのもの

Components are copied into your project as plain React + Tailwind files. No runtime package, no lock-in, nothing you cannot open and edit.

AIエージェント向け構築

An MCP server installs components on request, and always-on design rules keep your agent on the token system instead of inventing its own.

デフォルトでアクセス可能

Every form component builds on React Aria: labels, focus management, keyboard behavior, and ARIA wiring come included.

Figmaで最初に設計されている

Every component starts as a finished Figma frame and lands in code pixel for pixel, carried by 400+ design tokens.

ダークモード内蔵

Semantic tokens flip automatically under the .dark class. You never write a dark: override or a raw hex value.

一日からのデータ量

19 chart cards, dashboard blocks, and 10 full-page templates, made for products where the data is the interface.

インストール

モノレポや独自のインポートエイリアスを使う場合は、共有UIパッケージにインストールできます。次のガイドに従ってください: Monorepoセットアップガイド これらのコマンドを実行する前に。

1つのコマンドは、React + Tailwind CSS v4 プロジェクトを設定します。ランタイム依存関係、テーマトークン、グローバルスタイル、 cx 実用性および常にオンの代理店の設計規則。

npx boardui@latest init

必要なコンポーネントを追加してください。内部の依存関係とnpmパッケージは自動的に解決されます:

npx boardui@latest add button select date-picker
フレームワークガイドとマニュアルセットアップ

MCP サーバー

BoardUIはMCPを話します:あなたの代理店を一度接続し、それはすべてをブラウズします 104 コンポーネントと実際の使用例を参照し、プロジェクトをセットアップしてソースファイルを書き込めます。同じチャット内で、ライセンスキーによるProの有効化もできます。

Claude CodeCursorVS CodeCodex
エージェントを接続する

無料版とBoardUI Pro

BoardUI

無料

74 種類のコンポーネントとブロック。ボタン、入力、テーブル、ドロップダウン、日付ピッカー、サイドバー、認証カードに加え、トークンと文字スタイルの体系をすべて利用できます。MITライセンスでプロジェクト数は無制限。CLI、MCP、コピー&ペーストでインストールできます。

BoardUI Pro

ワンタイム購入のアンロック 30 種類のProコンポーネントとブロック。チャートカード、エージェント向けコンポーネント、AIチャットコンポーザーに加え、すべての 10 フルページのテンプレート、生涯の更新。 ライセンスを一度有効化し、Proは無料のもののように正確に作業をインストールします。

カラー

文字、背景、境界線、アイコン、チャートの色は、すべて用途に応じたトークンで定義しています。コンポーネント全体の統一感を保ち、ダークモードにも自動的に対応します。アクセントの色階調はCTAと選択状態に使われ、1か所の上書きでブランドカラーに変更できます。

accent-100 … accent-700 · text-text-primary · bg-background-secondary-default · border-separator-border

完全なトークン参照

タイポグラフィ

Figmaの文字スタイルは、サイズ、太さ、行の高さ、字間をまとめたユーティリティとして提供します。個別の値を組み合わせず、文字スタイルを選ぶだけで設定できます: text-sm font-medium フラグメント。

データを転送します。テキスト タイトル-1 中
データを転送します。text-title-2-medium テキスト タイトル2-medium
データを転送します。テキストヘッドライン - 中
データを転送します。テキスト ボディ媒体
データを転送します。テキストキャプション-1-セミボルト
フルタイプスケール

お問い合わせ Discordで質問する そして、私たちは、通常、同じ日に、オープンで答えます。