ライセンスシート
マシンを管理
別の端末でライセンスを有効化する前に、現在の端末枠を解除してください。
npx boardui@latest logoutゼロから始める
このウォークスルーは、BoardUIがプロジェクトにインストールされていないと仮定します。すべてのステップに従って、基礎、自由な依存関係、プロアクセス、および最初のコンポーネントまたはテンプレートが使用可能で完了します。
- プロジェクトを開くか、新しいプロジェクトを作成してください。
BoardUIはReact 19 + Tailwind CSS v4プロジェクトで動作します。まだ1つを持っていない場合、最も速い開始点は新しいNext.jsアプリです。
npx create-next-app@latest my-appcd my-app # Choose the defaults: TypeScript, Tailwind CSS, App Router, and @/* alias既に互換性のあるプロジェクトがありますか? ルートフォルダにターミナルを開き、次を続行します。 Vite、React Router、またはAstroについては、参照してください。 フレームワークガイド.
共有 UI パッケージまたはカスタム エイリアスの場合、 Monorepoセットアップガイド initを実行する前に。 自由およびプロの部品は同じを使用します
boardui.jsonconfig. コンポーネントは共有パッケージ内にインストールし、消費アプリにフルページテンプレートをインストールします。 - BoardUIを初期化し、必要なすべての依存関係をインストールします。
npx boardui@latest init --pro設定プロンプトを確認します。CLI は Tailwind v4 と BoardUI のランタイムと Pro パッケージをインストールし、テーマ、タイポグラフィ、グローバルスタイル、共有ユーティリティを作成します。フリーライブラリを別々にインストールする必要はありません。
- 生成されたBoardUI スタイルを接続します。
ルートレイアウトのデフォルトのグローバル CSS インポートを置き換え、BoardUI のテーマが読み込む書体である Inter を読み込みます。プロジェクトでまだ Tailwind v4 をコンパイルする仕組みがない場合は、PostCSS プラグインも読み込んでください。create-next-app 16.4 以降は
@tailwindcss/turbopackですでにコンパイルしており、init は PostCSS の手順を必要なときにだけ表示します。// app/layout.tsximport { Inter } from "next/font/google";import "@/styles/globals.css"; // replaces the default "./globals.css" import // BoardUI's theme reads its typeface from --font-inter (styles/theme.css).// The opsz axis renders display sizes in Inter Display, as on boardui.com.const inter = Inter({ variable: "--font-inter", subsets: ["latin"], axes: ["opsz"],}); export default function RootLayout({ children }: { children: React.ReactNode }) { return ( // On <html>, where theme.css resolves the font, in place of the Geist variables. <html lang="en" className={`${inter.variable} h-full antialiased`}> <body className="min-h-full flex flex-col">{children}</body> </html> );} - 購入メールからライセンスキーを有効化します。
npx boardui@latest login YOUR_LICENSE_KEYリプレース
YOUR_LICENSE_KEYリテラルキー付き。アングルブラケットは含まず。 有効化すると、ライセンスに含まれる端末枠を1つ使用します。 - 最初の Pro コンポーネントをインストールします。
npx boardui@latest add agent-progress calendarこのコマンドは、両方の例をインストールします。 1 つだけが必要な場合は、1 つの名前を使用します。 CLI は、すべての無料の BoardUI コンポーネントまたはユーティリティをフェッチし、不足している npm パッケージをインストールします。別々のフリーコンポーネントのセットアップステップはありません。
- または完全な Pro テンプレートをインストールします。
npx boardui@latest add template-ai-chatテンプレートには、ページ、コンポーネントのソース、無料の依存関係、プロブロック、および画像が含まれます。 コンポーネント、テンプレート、または同じライセンスの両方をインストールできます。
ソースを最新の状態に保つ
BoardUIは、ロックされたコンポーネントパッケージではなく、編集可能なソースコードをインストールします。インストールされた項目を最新のBoardUIバージョンに置き換えるために、同じコマンドを同じコマンドで実行します。 --overwrite ローカルのカスタマイズを最初に見直します。
npx boardui@latest add calendar --overwriteシート、CI、サポート
マシン間でライセンスを移動したり、インストールを自動化したり、ヘルプが必要な場合に直接アクセスしたりできます。
オートメーション
CIで使う
ライセンスを秘密の環境変数として追加します。 インタラクティブなログインは必要ありません。
BOARDUI_LICENSE_KEYダイレクトサポート
DM @sitenleyの特長ハンドが必要ですか?
DMをXに送信し、注文メールと、何が起こっているかの短い説明をしてください。