--- title: コンポーネント description: >- カード、ステップ、タブ、アコーディオン、バッジ、コードグループ、フレーム、ツリー、型テーブル、ライブプレビュー、差分 — 任意の MDX ページで使える組み込みコンポーネント。 --- Blume には、アクセシブルでテーマ設定可能なコンポーネントセットが同梱されており、**インポート不要**で任意の `.mdx` ページで利用できます。以下ではそれぞれをライブプレビューとソースとともに紹介します。コンポーネントはバニラ実装で React を使いません。React は独自のアイランドを追加した場合にのみ有効になります。 ## Card と CardGroup [#card-and-cardgroup] カードは、アイコン、タイトル、短い説明文とともにリンク先を示します。`CardGroup` でまとめるとレスポンシブなグリッドになります。ランディングページ、セクションのインデックス、「次のステップ」など、読者を先へ導きたい場所で活用してください。 **[クイックスタート](/docs/quickstart)** Blume をインストールして最初のページを公開しましょう。 **[コンポーネント](/docs/content/components)** コンポーネントライブラリを見る。 ```astro lineNumbers Install Blume and ship your first page. Browse the component library. ``` `Card` は `title`、任意の `href`（省略するとクリックできないカードになります）、そして Blume 組み込みのアイコンセットから選ぶ `icon` を受け取ります。`CardGroup` は `cols`（デフォルトは `2`）を受け取ります。 ## Steps 順序のある手順（インストール、セットアップの流れ、順番が重要なチュートリアルなど）のための、番号付きの縦方向シーケンスです。各 `Step` は `title` を受け取ります。 1. **Blume をインストール** パッケージをプロジェクトに追加します。 2. **ページを書く** コンテンツフォルダに `.mdx` ファイルを追加します。 3. **公開する** `blume build` を実行して `dist/` をデプロイします。 ```astro lineNumbers Add the package to your project. Drop an `.mdx` file into your content folder. Run `blume build` and deploy `dist/`. ``` ## Tabs 同等の内容 — 言語ごとのバリエーション、OS 別のコマンド、代替となるアプローチなど — をその場で切り替えられます。すべてをページ上に積み上げる必要がありません。各 `Tab` は `title` を受け取ります。 **macOS** Homebrew を使ってツールチェーンをインストールします。 **Windows** winget を使ってツールチェーンをインストールします。 ```astro lineNumbers Use Homebrew to install the toolchain. Use winget to install the toolchain. ``` `inline` を追加すると、枠線付きのボックスではなく、ボーダーレスで描画されます — 全幅の罫線上にタブストリップが並び、コンテンツはその下に本文として流れます。`param` を追加すると、アクティブなタブがハッシュではなく URL のクエリパラメータに同期され、選択状態を共有できるようになります。`?install=windows` で終わるリンクを開くと Windows タブが表示されます。各グループはそれぞれ独自の `param` に同期するため、1 ページ内に独立してディープリンク可能なグループを複数配置できます。同じタイトルのタブを持つグループは連動して切り替わります — 1 つのグループで「macOS」を選ぶと、macOS タブを持つすべてのグループがそれに追従します。`syncKey` を追加すると、その連動の範囲を限定できます。同じキーを共有するグループだけが連動して切り替わるため、たまたまタブのタイトルが一致しただけの無関係なグループは独立したままになります。 **macOS** Homebrew を使ってツールチェーンをインストールします。 **Windows** winget を使ってツールチェーンをインストールします。 ```astro lineNumbers Use Homebrew to install the toolchain. Use winget to install the toolchain. ``` ## Badge ステータスやメタデータを示す小さなインラインラベルです — バージョンタグ、「new」や「beta」のマーカー、安定性レベルなど。`variant` で意味に合わせて色を調整します。 ### デフォルト [#default] 特に強調のない中立的なメタデータ。安定版 ```astro Stable ``` ### アクセント [#accent] テーマのアクセントカラーで注意を引きます — 「new」や注目マーカーに適しています。新機能 ```astro New ``` ### 成功 [#success] 肯定的、または合格を示す状態。合格 ```astro Passing ``` ### 警告 [#warning] 実験的機能など、注意して使うべきもの。ベータ ```astro Beta ``` ### 危険 [#danger] 非推奨など、否定的または破壊的な状態。非推奨 ```astro Deprecated ``` ## Icon 名前を指定してアイコンを描画します — 同じ `icon` プロパティが、カード、ステップ、タブ、サイドバーの項目でも使われます。名前は [Lucide](https://lucide.dev/icons) 由来で、小文字のケバブケースです（`rocket`、`gauge`、`book-open`）。 ```astro ``` Blume は Lucide 専用です — 名前だけを指定すると Lucide から解決され、他のアイコン入力との対称性のために `lucide:` を前置することもできます（`lucide:rocket`）。`size` はピクセルサイズ（デフォルトは `16`）を設定し、`color` は色を付けます（任意の CSS カラー。デフォルトは `currentColor`）。名前の代わりに生の ` Product screenshot

``` ## YouTube YouTube 動画を、レスポンシブでプライバシーに配慮した（`youtube-nocookie.com`）16:9 のフレームに埋め込みます。クライアント JavaScript は一切含まれません。動画の `id` または完全な `url` に加え、任意の `title`（アクセシビリティ用）と秒単位の `start` 時間を渡せます。 [Big Buck Bunny](https://www.youtube.com/watch?v=aqz-KE-bpKQ) ```astro lineNumbers ``` ## Color コピー可能な 16 進数値とともにカラースウォッチを表示します — パレットやブランドカラーを文書化するのに便利です。スウォッチのリストには `variant="compact"` を、グループ化するには `Color.Row` と併せて `variant="table"` を使います。各 `Color.Item` は `name` と `value`（16 進数の文字列、またはテーマ対応の色のための `{ light, dark }`）を受け取ります。 ```astro lineNumbers ``` ## Tree 展開可能なフォルダを備えた階層的なファイル／フォルダ構造を描画します。（リスト駆動の手軽な方法については [ファイルツリー](#file-tree) を参照してください。`Tree` はフォルダごとの制御が可能です。）`Tree.Folder`（`name`、任意の `defaultOpen`、`openable`）と `Tree.File`（`name`）を使います。 ```astro lineNumbers ``` ## Panel 脇に置いておく補足的なコンテンツのための、タイトル付きコンテナです。`title` は任意です。パネルは、本文の流れを妨げずに補足的な詳細を収められます。 ```astro Panels hold supporting detail without interrupting the main flow. ``` ## Tooltip インラインの用語について、ホバー時に定義やヒントを表示します。`tip` がホバー時のテキストです。任意で `headline` と、フォローアップリンク用の `cta` + `href` を追加できます。 API という用語にホバーすると詳細がわかります。 ```astro Hover the API term. ``` ## Tile ビジュアル（アイコンや画像）を前面に出し、その下にタイトルと説明を配置したクリック可能なプレビューです。ギャラリーやショーケースに適しています。`title`、`description`、`href` を受け取り、子要素がビジュアルになります。 ```astro ``` ## Prompt ラベルとコピーボタンからなる 1 行の要素です。`description`（Markdown）が表示されるラベルで、本文がプロンプトそのものになります。本文は非表示で、**Copy prompt** ボタンを押すとクリップボードにコピーされます。`actions` でボタンを制御します（例: `["copy", "cursor"]`）。 POST /v1/pets エンドポイントのリファレンスドキュメントを書いてください。 ```astro Write reference docs for the POST /v1/pets endpoint. ``` ## Visibility 対象読者に応じてコンテンツを表示または非表示にします。`for="web"` はサイト上にのみ描画され、`for="agents"` は AI エージェントが読むエージェント向け Markdown（`llms-full.txt` と各ページの `.md` ミラー）を対象とします。 ```astro Shown on the site only. Shown only in the generated Markdown. ``` ## 型テーブル [#type-tables] オブジェクトのプロパティ — プロパティ、型、デフォルト値 — を文書化するためのテーブルです。`TypeTable` で行を手書きするか、`AutoTypeTable` で TypeScript のインターフェースや型エイリアスから直接生成できます。 ### 型テーブル [#type-table] 各行を展開すると説明と詳細が現れる、**プロパティ / 型**のグリッドです。プロパティ名をキーとする `type` マップを渡します。各エントリは `type` に加えて、任意の `description`、`default`、`required` フラグ、`typeDescription`、`typeDescriptionLink` を受け取ります。省略可能なプロパティ（`required` が未設定）は、名前の後に `?` が表示されます。 | Prop | Type | Default | Description | | - | - | - | - | | `label` | `string` | - | ボタンに表示されるラベル。 | | `variant?` | `"primary" \| "ghost"` | `"primary"` | 見た目のスタイル。 | | `disabled?` | `boolean` | - | | ```astro lineNumbers ``` ### 自動型テーブル [#auto-type-table] TypeScript の型から型テーブルを生成し、ドキュメントをソースと同期させ続けます。`AutoTypeTable` に `path`（プロジェクトルートからの解決）と型の `name` を指定します。説明は JSDoc コメントから、デフォルト値は `@default` タグから取得され、省略可能なプロパティ（`?`）はそれに応じて示されます。 ```astro ``` `path` の代わりに `type` で型をインラインで渡すこともできます — 小さな例に便利です。 ```astro lineNumbers ``` ## GitHub 情報 [#github-info] GitHub リポジトリへのリンクを、最新のスター数とフォーク数とともに表示するカードです。カウントはビルド時に取得され — クライアント JavaScript は不要 — API に到達できない場合でもカードは描画されます。`owner` と `repo` を渡すか、省略して `blume.config` のリポジトリを使用します。API のレート制限を緩和するには、環境変数 `GITHUB_TOKEN` を設定してください。このカードはインスタンスを [`github.host`](/docs/configuration#github-enterprise) から読み取ります。そのため Enterprise でホストされているサイトでは、明示的に指定した `owner` / `repo` もそのインスタンスを参照します。特定のカードだけ別の場所を指すようにするには `host` を渡します — 例えば Enterprise のサイトから公開プロジェクトを示す場合などです。REST のベースは、`github.host` の場合と同じ方法でそこから導出されます。 ```astro lineNumbers ``` ## Component `Component` は、プロジェクトの `examples/` ディレクトリにあるサンプルファイルを、ハイライトされたソースと並べてタブ形式でライブプレビューとして描画します。`path` でファイルを指定します — `examples/` 配下の位置から拡張子を除いたもの（つまり `examples/counter.tsx` なら `path="counter"`）。React、Vue、Svelte、Astro のサンプルがすべてサポートされ、フレームワークのサンプルはハイドレートされ、Astro のものは静的に描画されます。単一のファイルからプレビューとコードを同期させ続けます。プレビューは、ドキュメントのスタイルが一切届かない独立したフレーム内で描画されます — 本文のマージン、タイポグラフィ、テーマの装飾がコンポーネントに漏れ込むことはありません。フレームには Tailwind（プリフライトと、プロジェクトおよび examples ディレクトリからスキャンされたユーティリティ）と、`bg-background` のようなクラスがデフォルトでサイトのパレットに従うようにする Blume のデザイントークンが与えられ、サイトのライト／ダーク切り替えにリアルタイムで追従します。ペインは描画されたサンプルに合わせてサイズを調整し — 読み込み後にサンプルが拡大・縮小しても追従し続けます — Preview タブと Code タブは同じ高さを共有するため、切り替えてもページがずれることはありません。 shadcn の変数など、独自のデザインシステムでプレビューをスタイリングするには、`examples.css` にスタイルシートを指定します。これは Blume のデフォルトの後に各プレビューフレームへ注入されるため、あなたのトークンが優先されます。その中で `@import "tailwindcss"` は書かないでください。フレームはすでに Tailwind を提供しています。ダークモードのオーバーライドには `.dark` と `[data-theme="dark"]` のどちらも使えます。 ```ts // blume.config.ts export default defineConfig({ examples: { css: "examples/theme.css" }, }); ``` ```css /* examples/theme.css */ :root { --primary: oklch(0.6 0.2 260); } .dark { --primary: oklch(0.75 0.15 260); } @theme inline { --color-primary: var(--primary); } ``` ディレクトリも設定可能です — サンプルが別の場所（レジストリ構成など）にある場合は `source` を設定します（または文字列の省略記法 `examples: "..."` を使います）。`path` は常にそこからの相対パスになります。 ```ts // blume.config.ts export default defineConfig({ examples: "registry/files-sdk", }); ``` ```astro ``` `examples` には glob（`*`、`?`、`[]`、`{}`、`!` を含むもの）も指定できます。マッチしたファイルのみが検出され、`path` は glob の静的なプレフィックス（最初のワイルドカードより前の部分）からの相対パスになります。これは、各コンポーネントのソースをそのサンプルと同じ場所に置くレジストリ向けです — プレビュー用のデフォルトエクスポートを持たないソースが巻き込まれないよう、サンプルだけを指定してください。 ```ts // blume.config.ts export default defineConfig({ // registry/files-sdk/file-list/file-list.tsx — source, left out // registry/files-sdk/file-list/examples/basic.tsx — discovered examples: "registry/files-sdk/**/examples/*", }); ``` ```astro ``` モノレポでは、サンプルがインポートするコンポーネントは通常、隣接するワークスペースパッケージに置かれています。Tailwind の `@source` はインポートではなくファイルをスキャンします。Blume がスキャンするのはプロジェクトと `examples` ディレクトリ（`source` が指す場所。プロジェクト外でも可）なので、その隣接パッケージ内でしか使われていないクラスは、そのパッケージをスキャン対象に加えるまで生成されません。追加するには、`examples.css`（プレビューフレーム向け）または `theme.css`（サイト向け）に `@source` ディレクティブを記述します。パスは Tailwind の標準ルールどおり、そのディレクティブが置かれたファイルからの相対で書きます。Blume はそれを生成されるスタイルシートへ引き継ぎます。 ```css /* examples/theme.css */ @source "../../../packages/ui/src"; ``` ```astro ``` Astro のサンプルは、クライアント JavaScript なしでライブに描画されます。 ## CodeBlock `CodeBlock` は、フェンス付きコードと同じ Shiki のテーマとトランスフォーマー（ライト／ダークの切り替えを含む）でコード文字列をハイライトします。ランディングページや独自のコンポーネントなど、フェンスを置けない場所のためのものです。`code` と `lang` を渡します。 \`Hello, \${name}!\`;`} /> ```astro --- import CodeBlock from "blume/components/content/CodeBlock.astro"; --- ``` （独自コンポーネントの中などで）自分で HTML 文字列にハイライトしたい場合は、`blume/markdown` から基盤となるヘルパーをインポートします。 ```ts import { highlightCode } from "blume/markdown"; const html = await highlightCode(source, "ts"); ``` ## Diff `Diff` は git 形式の差分を、コードブロックと同じ Shiki のテーマでハイライトして描画します。すべてビルド時に生成されるため、クライアント JavaScript は不要です。2 つのインライン文字列（`old` / `new`）、2 つのファイルパス（`before` / `after`）、または unified 形式のパッチ（インラインの `patch` 文字列か `src` ファイル）を渡します。 ```astro ``` プロジェクト内の 2 つのファイルを、ルートからの相対パスで差分表示します。 ```astro ``` あるいは unified 形式のパッチを描画します — `src` でファイルから読み込むか、`patch` でインラインに指定します。 ```astro ``` ```astro ```