導入事例

BoardUIとは?

BoardUIは、Tailwind CSSで実装し、Figmaで設計したReactコンポーネントのオープンソースコレクションです。Figma MCPサーバーを通じてマスターのFigmaファイルから直接コードに変換することで、デザインと実装を一致させています。

デザインフェーズをスキップします。コピー、ペースト、ビルドだけです。

テックスタック

• React 19
• Next.js 16(アプリルータ) — ショーケースサイト用
• tailwind CSS v4 (CSS-first config 経由) @theme)
• TypeScript
• React Aria コンポーネント — アクセシビリティ プリミティブ, 必要に応じて per コンポーネントを追加

自由対プロ

• 無料 — ベースコンポーネント(ボタン、入力、チェックボックス、バッジ、アバターなど)。 許認可。 オープンソース。
• Pro — 構成されたブロック、ページテンプレート、複雑なパターン(データテーブル、コマンドメニュー、チャート、ダッシュボード)。ワンタイムライセンス料。

出典、依存関係なし

BoardUIはランタイムライブラリではありません。コンポーネントを追加すると、そのソースはプロジェクトにコピーされます。npm install、vendor lock-inはありません。コードを所有し、それを変更します。

BoardUIと他のライブラリの比較

BoardUIと、shadcn/uiからPrimeReactまでの他の9つのライブラリで同じ設定ダイアログを作り、それぞれをテストしました。 Reactデザインシステム ベスト10の比較記事を読む（英語）.

次のステップ

ヘッドオーバー インストールガイド プロジェクトをセットアップするか、または参照するために コンポーネントギャラリー.