From 9e4e0137e1d8ff54289ee337cddf18541e484658 Mon Sep 17 00:00:00 2001
From: Kenzo Wada <79452224+Kenzo-Wada@users.noreply.github.com>
Date: Fri, 27 Sep 2024 01:26:23 +0900
Subject: [PATCH] i18n(ja): translated `components` section + alpha (#2384)

Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
---
 docs/astro.config.mjs                         |   1 +
 .../src/content/docs/ja/components/asides.mdx | 155 ++++++++++++
 .../src/content/docs/ja/components/badges.mdx | 150 ++++++++++++
 .../content/docs/ja/components/card-grids.mdx | 173 ++++++++++++++
 docs/src/content/docs/ja/components/cards.mdx | 106 +++++++++
 docs/src/content/docs/ja/components/code.mdx  | 103 ++++++++
 .../content/docs/ja/components/file-tree.mdx  | 222 ++++++++++++++++++
 docs/src/content/docs/ja/components/icons.mdx | 124 ++++++++++
 .../docs/ja/components/link-buttons.mdx       | 145 ++++++++++++
 .../content/docs/ja/components/link-cards.mdx | 124 ++++++++++
 docs/src/content/docs/ja/components/steps.mdx | 120 ++++++++++
 docs/src/content/docs/ja/components/tabs.mdx  | 221 +++++++++++++++++
 .../docs/ja/components/using-components.mdx   |  96 ++++++++
 ...oring-content.md => authoring-content.mdx} | 148 ++++++++++--
 docs/src/content/docs/ja/reference/icons.mdx  |  19 ++
 15 files changed, 1891 insertions(+), 16 deletions(-)
 create mode 100644 docs/src/content/docs/ja/components/asides.mdx
 create mode 100644 docs/src/content/docs/ja/components/badges.mdx
 create mode 100644 docs/src/content/docs/ja/components/card-grids.mdx
 create mode 100644 docs/src/content/docs/ja/components/cards.mdx
 create mode 100644 docs/src/content/docs/ja/components/code.mdx
 create mode 100644 docs/src/content/docs/ja/components/file-tree.mdx
 create mode 100644 docs/src/content/docs/ja/components/icons.mdx
 create mode 100644 docs/src/content/docs/ja/components/link-buttons.mdx
 create mode 100644 docs/src/content/docs/ja/components/link-cards.mdx
 create mode 100644 docs/src/content/docs/ja/components/steps.mdx
 create mode 100644 docs/src/content/docs/ja/components/tabs.mdx
 create mode 100644 docs/src/content/docs/ja/components/using-components.mdx
 rename docs/src/content/docs/ja/guides/{authoring-content.md => authoring-content.mdx} (83%)
 create mode 100644 docs/src/content/docs/ja/reference/icons.mdx

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index fd76cad6818..4924cda337c 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -137,6 +137,7 @@ export default defineConfig({
 						fr: 'Composants',
 						ru: 'Компоненты',
 						ko: '컴포넌트',
+						ja: 'コンポーネント',
 					},
 					autogenerate: { directory: 'components' },
 				},
diff --git a/docs/src/content/docs/ja/components/asides.mdx b/docs/src/content/docs/ja/components/asides.mdx
new file mode 100644
index 00000000000..717e8bbac6b
--- /dev/null
+++ b/docs/src/content/docs/ja/components/asides.mdx
@@ -0,0 +1,155 @@
+---
+title: 補足情報
+description: Starlightで補足情報を使用して、ページのメインコンテンツの横に補足情報を表示する方法を学びます。
+---
+
+import { Aside } from '@astrojs/starlight/components';
+
+ページのメインコンテンツの横に補足情報を表示するには、`<Aside>`コンポーネントを使用します。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+<Aside slot="preview">
+    `<Aside>`に重要ではない補足情報を含めます。
+</Aside>
+</Preview>
+
+## インポート
+
+```tsx
+import { Aside } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+`<Aside>`コンポーネントを使用して補足情報（「アドモニション」や「コールアウト」とも呼ばれる）を表示します。
+
+`<Aside>`にはオプションの[`type`](#type)属性があり、これによって補足情報の色、アイコン、およびデフォルトのタイトルが制御されます。
+
+<Preview>
+
+````mdx
+import { Aside } from '@astrojs/starlight/components';
+
+<Aside>補足情報のコンテンツ。</Aside>
+
+<Aside type="caution">注意が必要なコンテンツ。</Aside>
+
+<Aside type="tip">
+
+補足情報には他のコンテンツも対応しています。
+
+```js
+// たとえば、コードスニペットなど。
+```
+
+</Aside>
+
+<Aside type="danger">パスワードを誰にも教えないでください。</Aside>
+````
+
+<Fragment slot="markdoc">
+
+````markdoc
+{% aside %}
+補足情報のコンテンツ。
+{% /aside %}
+
+{% aside type="caution" %}
+注意が必要なコンテンツ。
+{% /aside %}
+
+{% aside type="tip" %}
+補足情報には他のコンテンツも対応しています。
+
+```js
+// たとえば、コードスニペットなど。
+```
+{% /aside %}
+
+{% aside type="danger" %}
+パスワードを誰にも教えないでください。
+{% /aside %}
+````
+
+</Fragment>
+
+<Fragment slot="preview">
+
+    <Aside>補足情報のコンテンツ。</Aside>
+
+    <Aside type="caution">注意が必要なコンテンツ。</Aside>
+
+    <Aside type="tip">
+
+    補足情報には他のコンテンツも対応しています。
+
+    ```js
+    // たとえば、コードスニペットなど。
+    ```
+    </Aside>
+
+    <Aside type="danger">パスワードを誰にも教えないでください。</Aside>
+
+</Fragment>
+
+</Preview>
+
+Starlightは、`<Aside>`コンポーネントの代替として、MarkdownとMDXで補足情報をレンダリングするためのカスタム構文も提供しています。
+カスタム構文の詳細については、["MarkdownでのContent作成"](/ja/guides/authoring-content/#補足情報)ガイドを参照してください。
+
+### カスタムタイトルの使用
+
+[`title`](#title)属性を使用して、デフォルトの補足情報タイトルを上書きできます。
+
+<Preview>
+
+```mdx 'title="注意してください！"'
+import { Aside } from '@astrojs/starlight/components';
+
+<Aside type="caution" title="注意してください！">
+	カスタムタイトル*付きの*警告補足情報。
+</Aside>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'title="注意してください！"'
+{% aside type="caution" title="注意してください！" %}
+カスタムタイトル*付きの*警告補足情報。
+{% /aside %}
+```
+
+</Fragment>
+
+<Aside slot="preview" type="caution" title="注意してください！">
+	カスタムタイトル*付きの*警告補足情報。
+</Aside>
+  
+</Preview>
+
+## `<Aside>` プロパティ
+
+**実装:** [`Aside.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Aside.astro)
+
+`<Aside>`コンポーネントは以下のプロパティを受け入れます：
+
+### `type`
+
+**型:** `'note' | 'tip' | 'caution' | 'danger'`  
+**デフォルト:** `'note'`
+
+表示する補足情報のタイプ：
+
+- `note`補足情報（デフォルト）は青色で、情報アイコンを表示します。
+- `tip`補足情報は紫色で、ロケットアイコンを表示します。
+- `caution`補足情報は黄色で、三角形の警告アイコンを表示します。
+- `danger`補足情報は赤色で、八角形の警告アイコンを表示します。
+
+### `title`
+
+**型:** `string`
+
+補足情報に表示するタイトル。
+`title`が設定されていない場合、現在の補足情報に`type`のデフォルトタイトルが使用されます。
diff --git a/docs/src/content/docs/ja/components/badges.mdx b/docs/src/content/docs/ja/components/badges.mdx
new file mode 100644
index 00000000000..4e55c24f128
--- /dev/null
+++ b/docs/src/content/docs/ja/components/badges.mdx
@@ -0,0 +1,150 @@
+---
+title: バッジ
+description: Starlightでバッジを使用して追加の情報を表示する方法を学びましょう。
+---
+
+import { Badge } from '@astrojs/starlight/components';
+
+ステータスやカテゴリーのような小さな情報を表示するには、`<Badge>`コンポーネントを使用します。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<Badge slot="preview" text="新着" />
+
+</Preview>
+
+## インポート
+
+```tsx
+import { Badge } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+バッジを表示するには、`<Badge>`コンポーネントを使用し、表示したい内容を[`text`](#text)属性に渡します。
+
+デフォルトでは、バッジはサイトのテーマのアクセントカラーを使用します。
+組み込みのバッジカラーを使用するには、[`variant`](#variant)属性をサポートされている値のいずれかに設定します。
+
+<Preview>
+
+```mdx
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="ノート" variant="note" />
+<Badge text="成功" variant="success" />
+<Badge text="ヒント" variant="tip" />
+<Badge text="注意" variant="caution" />
+<Badge text="危険" variant="danger" />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% badge text="ノート" variant="note" /%}
+{% badge text="危険" variant="success" /%}
+{% badge text="ヒント" variant="tip" /%}
+{% badge text="注意" variant="caution" /%}
+{% badge text="危険" variant="danger" /%}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+	<Badge text="ノート" variant="note" />
+	<Badge text="成功" variant="success" />
+	<Badge text="ヒント" variant="tip" />
+	<Badge text="注意" variant="caution" />
+	<Badge text="危険" variant="danger" />
+</Fragment>
+
+</Preview>
+
+### 異なるサイズの使用
+
+[`size`](#size)属性を使用してバッジのテキストサイズを制御します。
+
+<Preview>
+
+```mdx /size="\w+"/
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="新着" size="small" />
+<Badge text="新着かつ改良" size="medium" />
+<Badge text="新着、改良、もっと大きく" size="large" />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc /size="\w+"/
+{% badge text="新着" size="small" /%}
+{% badge text="新着かつ改良" size="medium" /%}
+{% badge text="新着、改良、もっと大きく" size="large" /%}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+	<Badge text="新着" size="small" />
+	<Badge text="新着かつ改良" size="medium" />
+	<Badge text="新着、改良、もっと大きく" size="large" />
+</Fragment>
+
+</Preview>
+
+### バッジのカスタマイズ
+
+カスタムCSSを使用して、`class`や`style`などの他の`<span>`属性を使用してバッジをカスタマイズします。
+
+<Preview>
+
+```mdx "style={{ fontStyle: 'italic' }}"
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="カスタム" variant="success" style={{ fontStyle: 'italic' }} />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'style="font-style: italic;"'
+{% badge text="カスタム" variant="success" style="font-style: italic;" /%}
+```
+
+</Fragment>
+
+<Badge
+	slot="preview"
+	text="カスタム"
+	variant="success"
+	style={{ fontStyle: 'italic' }}
+/>
+
+</Preview>
+
+## `<Badge>` プロパティ
+
+**実装:** [`Badge.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Badge.astro)
+
+`<Badge>`コンポーネントは、以下のプロパティおよびその他の[`<span>`要素の属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes)を受け付けます。
+
+### `text`
+
+**必須**  
+**型:** `string`
+
+バッジに表示するテキスト内容。
+
+### `variant`
+
+**型:** `'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'`  
+**デフォルト:** `'default'`
+
+使用するバッジのカラーバリアント: `note` (青), `tip` (紫), `danger` (赤), `caution` (オレンジ), `success` (緑), または `default` (テーマのアクセントカラー)。
+
+### `size`
+
+**型:** `'small' | 'medium' | 'large'`
+
+表示するバッジのサイズを定義します。
diff --git a/docs/src/content/docs/ja/components/card-grids.mdx b/docs/src/content/docs/ja/components/card-grids.mdx
new file mode 100644
index 00000000000..0fa6ad512ac
--- /dev/null
+++ b/docs/src/content/docs/ja/components/card-grids.mdx
@@ -0,0 +1,173 @@
+---
+title: カードグリッド
+description: Starlightで複数のカードをグリッドにラップする方法を学びます。
+sidebar:
+  order: 4
+---
+
+import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
+
+複数の[`<Card>`](/ja/components/cards/)または[`<LinkCard>`](/ja/components/link-cards/)コンポーネントをグリッドにラップするには、`<CardGrid>`コンポーネントを使用します。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<CardGrid slot="preview">
+	<Card title="恒星" icon="star">
+		シリウス、ベガ、ベテルギウス
+	</Card>
+	<Card title="衛星" icon="moon">
+		イオ、エウロパ、ガニメデ
+	</Card>
+</CardGrid>
+
+</Preview>
+
+## インポート
+
+```tsx
+import { CardGrid } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+### カードをグループ化する
+
+`<CardGrid>`コンポーネントを使用してグループ化することで、十分なスペースがある場合に複数の[`<Card>`](/ja/components/cards/)コンポーネントを並べて表示します。
+
+<Preview>
+
+```mdx {3,10}
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+<CardGrid>
+	<Card title="これをチェック" icon="open-book">
+		強調したい興味深いコンテンツ。
+	</Card>
+	<Card title="その他の機能" icon="information">
+		共有したいその他の情報。
+	</Card>
+</CardGrid>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc {1,9}
+{% cardgrid %}
+{% card title="これをチェック" icon="open-book" %}
+強調したい興味深いコンテンツ。
+{% /card %}
+
+{% card title="その他の機能" icon="information" %}
+共有したいその他の情報。
+{% /card %}
+{% /cardgrid %}
+```
+
+</Fragment>
+
+<CardGrid slot="preview">
+	<Card title="これをチェック" icon="open-book">
+		強調したい興味深いコンテンツ。
+	</Card>
+	<Card title="その他の機能" icon="information">
+		共有したいその他の情報。
+	</Card>
+</CardGrid>
+
+</Preview>
+
+### リンクカードをグループ化する
+
+`<CardGrid>`コンポーネントを使用してグループ化することで、十分なスペースがある場合に複数の[`<LinkCard>`](/ja/components/link-cards/)コンポーネントを並べて表示します。
+
+<Preview>
+
+```mdx {3,6}
+import { LinkCard, CardGrid } from '@astrojs/starlight/components';
+
+<CardGrid>
+	<LinkCard title="Markdownの作成" href="/ja/guides/authoring-content/" />
+	<LinkCard title="コンポーネント" href="/ja/components/using-components/" />
+</CardGrid>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc {1,5}
+{% cardgrid %}
+{% linkcard title="Markdownの作成" href="/ja/guides/authoring-content/" /%}
+
+{% linkcard title="コンポーネント" href="/ja/components/using-components/" /%}
+{% /cardgrid %}
+```
+
+</Fragment>
+
+<CardGrid slot="preview">
+	<LinkCard title="Markdownの作成" href="/ja/guides/authoring-content/" />
+	<LinkCard title="コンポーネント" href="/ja/components/using-components/" />
+</CardGrid>
+
+</Preview>
+
+### カードをずらす
+
+視覚的な興味を加えるために、`<CardGrid>`コンポーネントに[`stagger`](#カードをずらす)属性を追加してグリッドの2列目を垂直方向にずらします。
+
+この属性は、プロジェクトの主要な機能を表示するホームページで便利です。
+
+<Preview>
+
+```mdx "stagger"
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+<CardGrid stagger>
+	<Card title="これをチェック" icon="open-book">
+		強調したい興味深いコンテンツ。
+	</Card>
+	<Card title="その他の機能" icon="information">
+		共有したいその他の情報。
+	</Card>
+</CardGrid>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc "stagger=true"
+{% cardgrid stagger=true %}
+{% card title="これをチェック" icon="open-book" %}
+強調したい興味深いコンテンツ。
+{% /card %}
+
+{% card title="その他の機能" icon="information" %}
+共有したいその他の情報。
+{% /card %}
+{% /cardgrid %}
+```
+
+</Fragment>
+
+<CardGrid slot="preview" stagger>
+	<Card title="これをチェック" icon="open-book">
+		強調したい興味深いコンテンツ。
+	</Card>
+	<Card title="その他の機能" icon="information">
+		共有したいその他の情報。
+	</Card>
+</CardGrid>
+
+</Preview>
+
+## `<CardGrid>` プロパティ
+
+**実装:** [`CardGrid.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/CardGrid.astro)
+
+`<CardGrid>`コンポーネントは以下のプロパティを受け入れます：
+
+### `stagger`
+
+**型:** `boolean`
+
+グリッド内のカードをずらすかどうかを定義します。
diff --git a/docs/src/content/docs/ja/components/cards.mdx b/docs/src/content/docs/ja/components/cards.mdx
new file mode 100644
index 00000000000..ef4557bd8e1
--- /dev/null
+++ b/docs/src/content/docs/ja/components/cards.mdx
@@ -0,0 +1,106 @@
+---
+title: カード
+description: Starlightでコンテンツをボックス内に表示するためのカードの使用方法を学びます。
+sidebar:
+  order: 2
+---
+
+import { Card } from '@astrojs/starlight/components';
+
+Starlightのスタイルに合わせてコンテンツをボックス内に表示するには、`<Card>`コンポーネントを使用します。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+	<Card slot="preview" title="衛星" icon="moon">
+		イオ、エウロパ、ガニメデ
+	</Card>
+</Preview>
+
+## インポート
+
+```tsx
+import { Card } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+`<Card>`コンポーネントを使用してカードを表示し、カードの[`title`](#title)を提供します。
+
+<Preview>
+
+```mdx
+import { Card } from '@astrojs/starlight/components';
+
+<Card title="これをチェック">強調したい興味深いコンテンツ。</Card>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% card title="これをチェック" %}
+強調したい興味深いコンテンツ。
+{% /card %}
+```
+
+</Fragment>
+
+<Card slot="preview" title="これをチェック">
+	強調したい興味深いコンテンツ。
+</Card>
+
+</Preview>
+
+### カードにアイコンを追加する
+
+[Starlightの組み込みアイコン](/ja/reference/icons/#すべてのアイコン)の名前を[`icon`](#icon)属性に設定して、カードにアイコンを含めることができます。
+
+<Preview>
+
+```mdx 'icon="star"'
+import { Card } from '@astrojs/starlight/components';
+
+<Card title="恒星" icon="star">
+	シリウス、ベガ、ベテルギウス
+</Card>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'icon="star"'
+{% card title="恒星" icon="star" %}
+シリウス、ベガ、ベテルギウス
+{% /card %}
+```
+
+</Fragment>
+
+<Card slot="preview" title="恒星" icon="star">
+	シリウス、ベガ、ベテルギウス
+</Card>
+  
+</Preview>
+
+### カードをグループ化する
+
+[`<CardGrid>`](/ja/components/card-grids/)コンポーネントを使用してグループ化することで、十分なスペースがある場合に複数のカードを並べて表示できます。
+例については、["カードのグループ化"](/ja/components/card-grids/#カードをグループ化する)ガイドを参照してください。
+
+## `<Card>` プロパティ
+
+**実装:** [`Card.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Card.astro)
+
+`<Card>`コンポーネントは以下のプロパティを受け入れます：
+
+### `title`
+
+**必須**  
+**型:** `string`
+
+表示するカードのタイトル。
+
+### `icon`
+
+**型:** `string`
+
+カードには[Starlightの組み込みアイコン](/ja/reference/icons/#すべてのアイコン)の名前に設定された`icon`属性を含めることができます。
diff --git a/docs/src/content/docs/ja/components/code.mdx b/docs/src/content/docs/ja/components/code.mdx
new file mode 100644
index 00000000000..37e412d3919
--- /dev/null
+++ b/docs/src/content/docs/ja/components/code.mdx
@@ -0,0 +1,103 @@
+---
+title: コード
+description: StarlightでMarkdownのコードブロックを使わずにシンタックスハイライトされたコードを表示する方法を学びましょう。
+---
+
+import { Code } from '@astrojs/starlight/components';
+
+`<Code>`コンポーネントは、シンタックスハイライトされたコードをレンダリングします。
+これは、[Markdownのコードブロック](/ja/guides/authoring-content/#コード)を使用できない場合、例えば、ファイルやデータベース、APIから取得したデータを表示する場合に便利です。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<Code
+	slot="preview"
+	code={`## ようこそ
+
+**宇宙**からこんにちは！`}
+lang="md"
+title="example.md"
+ins={3}
+/>
+
+</Preview>
+
+## インポート
+
+```tsx
+import { Code } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+外部ソースから取得したコードを表示する場合などに、`<Code>`コンポーネントを使用してシンタックスハイライトされたコードをレンダリングします。
+
+完全な使用方法と利用可能なプロパティのリストについては、[Expressive Codeの「Codeコンポーネント」ドキュメント](https://expressive-code.com/key-features/code-component/)を参照してください。
+
+<Preview>
+
+```mdx
+import { Code } from '@astrojs/starlight/components';
+
+export const exampleCode = `console.log('これはファイルやCMSから来る可能性がある！');`;
+export const fileName = 'example.js';
+export const highlights = ['ファイル', 'CMS'];
+
+<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% code
+   code="console.log('これはファイルやCMSから来る可能性がある！');"
+   lang="js"
+   title="example.js"
+   meta="'ファイル' 'CMS'" /%}
+```
+
+</Fragment>
+
+export const exampleCode = `console.log('これはファイルやCMSから来る可能性がある！');`;
+export const fileName = 'example.js';
+export const highlights = ['ファイル', 'CMS'];
+
+<Code
+	slot="preview"
+	code={exampleCode}
+	lang="js"
+	title={fileName}
+	mark={highlights}
+/>
+
+</Preview>
+
+### インポートしたコードを表示する
+
+MDXファイルやAstroコンポーネント内で、[Viteの`?raw`インポートサフィックス](https://vitejs.dev/guide/assets#importing-asset-as-string)を使用して、任意のコードファイルを文字列としてインポートできます。
+その後、このインポートした文字列を`<Code>`コンポーネントに渡して、ページにコードを表示することができます。
+
+<Preview>
+
+```mdx "?raw"
+# src/content/docs/example.mdx
+
+import { Code } from '@astrojs/starlight/components';
+import importedCode from '/src/env.d.ts?raw';
+
+<Code code={importedCode} lang="ts" title="src/env.d.ts" />
+```
+
+import importedCode from '/src/env.d.ts?raw';
+
+<Code slot="preview" code={importedCode} lang="ts" title="src/env.d.ts" />
+
+</Preview>
+
+## `<Code>` プロパティ
+
+**実装:** [`Code.astro`](https://github.com/expressive-code/expressive-code/blob/main/packages/astro-expressive-code/components/Code.astro)
+
+`<Code>`コンポーネントは、[Expressive Codeの「Codeコンポーネント」ドキュメント](https://expressive-code.com/key-features/code-component/#available-props)に記載されているすべてのプロパティを受け付けます。
diff --git a/docs/src/content/docs/ja/components/file-tree.mdx b/docs/src/content/docs/ja/components/file-tree.mdx
new file mode 100644
index 00000000000..2e04a424cfb
--- /dev/null
+++ b/docs/src/content/docs/ja/components/file-tree.mdx
@@ -0,0 +1,222 @@
+---
+title: ファイルツリー
+description: Starlightでファイルアイコンや折りたたみ可能なサブディレクトリを使ってディレクトリ構造を表示する方法を学びましょう。
+---
+
+import { FileTree } from '@astrojs/starlight/components';
+
+ファイルアイコンや折りたたみ可能なサブディレクトリを使ってディレクトリ構造を表示するには、`<FileTree>`コンポーネントを使用します。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<FileTree slot="preview">
+
+- astro.config.mjs **重要な**ファイル
+- package.json
+- README.md
+- src
+  - components
+    - **Header.astro**
+  - …
+- pages/
+
+</FileTree>
+
+</Preview>
+
+## インポート
+
+```tsx
+import { FileTree } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+`<FileTree>`コンポーネントを使用して、ファイルアイコンや折りたたみ可能なサブディレクトリを含むファイルツリーを表示します。
+
+ファイルやディレクトリの構造を指定するには、[Markdownの箇条書きリスト](https://www.markdownguide.org/basic-syntax/#unordered-lists)を`<FileTree>`の内部で使用します。サブディレクトリを作成するには、ネストしたリストを作成するか、リスト項目の末尾に `/` を追加して、特定の内容を持たないディレクトリとして表示します。
+
+<Preview>
+
+```mdx
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- astro.config.mjs
+- package.json
+- src
+  - components
+    - Header.astro
+    - Title.astro
+  - pages/
+
+</FileTree>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% filetree %}
+- astro.config.mjs
+- package.json
+- src
+  - components
+    - Header.astro
+    - Title.astro
+  - pages/
+{% /filetree %}
+```
+
+</Fragment>
+
+<FileTree slot="preview">
+
+- astro.config.mjs
+- package.json
+- src
+  - components
+    - Header.astro
+    - Title.astro
+  - pages/
+
+</FileTree>
+
+</Preview>
+
+### エントリを強調表示する
+
+ファイルやディレクトリの名前を太字にして目立たせることができます。例: `**README.md**`。
+
+<Preview>
+
+```mdx {7}
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- src
+  - components
+    - **Header.astro**
+    - Title.astro
+
+</FileTree>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc {4}
+{% filetree %}
+- src
+  - components
+    - **Header.astro**
+    - Title.astro
+{% /filetree %}
+```
+
+</Fragment>
+
+<FileTree slot="preview">
+
+- src
+  - components
+    - **Header.astro**
+    - Title.astro
+
+</FileTree>
+
+</Preview>
+
+### コメントを追加する
+
+ファイルやディレクトリにコメントを追加するには、名前の後にテキストを追加します。コメントには、太字や斜体などのMarkdownのインライン形式がサポートされています。
+
+<Preview>
+
+```mdx {7}
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- src
+  - components
+    - Header.astro **重要な**ファイル
+    - Title.astro
+
+</FileTree>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc {4}
+{% filetree %}
+- src
+  - components
+    - Header.astro **重要な**ファイル
+    - Title.astro
+{% /filetree %}
+```
+
+</Fragment>
+
+<FileTree slot="preview">
+
+- src
+  - components
+    - Header.astro **重要な**ファイル
+    - Title.astro
+
+</FileTree>
+
+</Preview>
+
+### プレースホルダーを追加する
+
+`...`または`…`を名前として使用することで、プレースホルダーファイルやディレクトリを追加できます。これは、フォルダがさらに多くのアイテムを含むことが期待されていることを読者に示しながら、それらをすべて明示的に指定する必要がない場合に便利です。
+
+<Preview>
+
+```mdx {8}
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- src
+  - components
+    - Header.astro
+    - …
+
+</FileTree>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc {5}
+{% filetree %}
+- src
+  - components
+    - Header.astro
+    - …
+{% /filetree %}
+```
+
+</Fragment>
+
+<FileTree slot="preview">
+
+- src
+  - components
+    - Header.astro
+    - …
+
+</FileTree>
+
+</Preview>
+
+## `<FileTree>` プロパティ
+
+**実装:** [`FileTree.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/FileTree.astro)
+
+`<FileTree>`コンポーネントはプロパティを受け付けません。
diff --git a/docs/src/content/docs/ja/components/icons.mdx b/docs/src/content/docs/ja/components/icons.mdx
new file mode 100644
index 00000000000..3d844b00dcd
--- /dev/null
+++ b/docs/src/content/docs/ja/components/icons.mdx
@@ -0,0 +1,124 @@
+---
+title: アイコン
+description: Starlightでアイコンを表示する方法を学びましょう。
+---
+
+import { Icon } from '@astrojs/starlight/components';
+
+Starlightの[組み込みアイコンセット](/ja/reference/icons/#すべてのアイコン)からアイコンを表示するには、`<Icon>`コンポーネントを使用します。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<Icon
+	slot="preview"
+	name="open-book"
+	color="var(--sl-color-text-accent)"
+	size="4rem"
+/>
+
+</Preview>
+
+## インポート
+
+```tsx
+import { Icon } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+`<Icon>`コンポーネントを使用してアイコンを表示します。アイコンには[`name`](#name)が必要で、これは[Starlightの組み込みアイコン](/ja/reference/icons/#すべてのアイコン)のいずれかに設定されます。また、オプションでスクリーンリーダー向けに[`label`](#label)を追加して文脈を提供することができます。
+
+<Preview>
+
+```mdx
+import { Icon } from '@astrojs/starlight/components';
+
+<Icon name="star" />
+<Icon name="starlight" label="Starlightのロゴ" />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% icon name="star" /%}
+{% icon name="starlight" label="Starlightのロゴ" /%}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+	<Icon name="star" />
+	<Icon name="starlight" label="Starlightのロゴ" />
+</Fragment>
+
+</Preview>
+
+### アイコンのカスタマイズ
+
+[`size`](#size)や[`color`](#color)属性を使用して、CSS単位やカラーバリューを使ってアイコンの外観を調整できます。また、[`class`](#class)属性を使用してカスタムCSSクラスをアイコンに追加することができます。
+
+<Preview>
+
+```mdx
+import { Card } from '@astrojs/starlight/components';
+
+<Icon name="star" color="goldenrod" size="2rem" />
+<Icon name="rocket" color="var(--sl-color-text-accent)" />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% icon name="star" color="goldenrod" size="2rem" /%}
+{% icon name="rocket" color="var(--sl-color-text-accent)" /%}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+	<Icon name="star" color="goldenrod" size="2rem" />
+	<Icon name="rocket" color="var(--sl-color-text-accent)" />
+</Fragment>
+
+</Preview>
+
+## `<Icon>` プロパティ
+
+**実装:** [`Icon.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Icon.astro)
+
+`<Icon>`コンポーネントは以下のプロパティを受け付けます。
+
+### `name`
+
+**必須**  
+**型:** `string`
+
+表示するアイコンの名前を[Starlightの組み込みアイコン](/ja/reference/icons/#すべてのアイコン)の1つに設定します。
+
+### `label`
+
+**型:** `string`
+
+スクリーンリーダーなどの支援技術に文脈を提供するためのオプションのラベル。
+
+`label`が設定されていない場合、アイコンは支援技術から完全に隠されます。この場合、アイコンがなくても文脈が理解できることを確認してください。例えば、アイコンのみが含まれるリンクには、アクセシビリティを確保するために`label`属性が**必ず**含まれている必要がありますが、リンクにテキストが含まれ、アイコンが純粋に装飾的なものである場合は、`label`を省略することが理にかなっています。
+
+### `size`
+
+**型:** `string`
+
+CSS単位でアイコンのサイズを指定します。
+
+### `color`
+
+**型:** `string`
+
+CSSカラーバリューを使用してアイコンの色を指定します。
+
+### `class`
+
+**型:** `string`
+
+アイコンにカスタムCSSクラスを追加します。
diff --git a/docs/src/content/docs/ja/components/link-buttons.mdx b/docs/src/content/docs/ja/components/link-buttons.mdx
new file mode 100644
index 00000000000..64215448360
--- /dev/null
+++ b/docs/src/content/docs/ja/components/link-buttons.mdx
@@ -0,0 +1,145 @@
+---
+title: リンクボタン
+description: 視覚的に目立つコールトゥアクションリンクをStarlightで作成する方法を学びましょう。
+---
+
+import { LinkButton } from '@astrojs/starlight/components';
+
+視覚的に目立つコールトゥアクションリンクを表示するには、`<LinkButton>`コンポーネントを使用します。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<LinkButton slot="preview" href="/ja/getting-started/">
+	ドキュメントを読む
+</LinkButton>
+
+</Preview>
+
+## インポート
+
+```tsx
+import { LinkButton } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+`<LinkButton>`コンポーネントを使用して、視覚的に目立つコールトゥアクションリンクを表示します。
+リンクボタンは、ユーザーを最も関連性の高いコンテンツやアクションにつなげるために便利で、ランディングページなどでよく使用されます。
+
+`<LinkButton>`には[`href`](#href)属性が必要です。
+オプションとして、[`variant`](#variant)属性を使用して、ボタンの外観をカスタマイズできます。`variant`属性には`primary`（デフォルト）、`secondary`、`minimal`のいずれかを指定できます。
+
+<Preview>
+
+```mdx
+import { LinkButton } from '@astrojs/starlight/components';
+
+<LinkButton href="/ja/getting-started/">始めましょう</LinkButton>
+<LinkButton href="/ja/reference/configuration/" variant="secondary">
+	設定リファレンス
+</LinkButton>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% linkbutton href="/ja/getting-started/" %}始めましょう{% /linkbutton %}
+
+{% linkbutton href="/ja/reference/configuration/" variant="secondary" %}
+設定リファレンス
+{% /linkbutton %}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+	<LinkButton href="/ja/getting-started/">始めましょう</LinkButton>
+	<LinkButton href="/ja/reference/configuration/" variant="secondary">
+		設定リファレンス
+	</LinkButton>
+</Fragment>
+
+</Preview>
+
+### リンクボタンにアイコンを追加する
+
+[`icon`](#icon)属性を使用して、リンクボタンにアイコンを追加できます。これは、[Starlightの組み込みアイコン](/ja/reference/icons/#すべてのアイコン)の名前を指定します。
+
+[`iconPlacement`](#iconplacement)属性を使用すると、アイコンをテキストの前に配置することができ、デフォルトでは`end`（後ろ）ですが、`start`（前）に設定できます。
+
+<Preview>
+
+```mdx {6-7}
+import { LinkButton } from '@astrojs/starlight/components';
+
+<LinkButton
+	href="https://docs.astro.build/ja/"
+	variant="secondary"
+	icon="external"
+	iconPlacement="start"
+>
+	Astroに関連するドキュメント
+</LinkButton>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc {4-5}
+{% linkbutton
+   href="https://docs.astro.build/ja/"
+	 variant="secondary"
+	 icon="external"
+	 iconPlacement="start" %}
+Astroに関連するドキュメント
+{% /linkbutton %}
+```
+
+</Fragment>
+
+<LinkButton
+	slot="preview"
+	href="https://docs.astro.build/ja/"
+	variant="secondary"
+	icon="external"
+	iconPlacement="start"
+>
+	Astroに関連するドキュメント
+</LinkButton>
+
+</Preview>
+
+## `<LinkButton>` プロパティ
+
+**実装:** [`LinkButton.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/LinkButton.astro)
+
+`<LinkButton>`コンポーネントは以下のプロパティを受け付け、[他の`<a>`要素の属性](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)も使用できます。
+
+### `href`
+
+**必須**  
+**型:** `string`
+
+リンクボタンが指すURL。
+
+### `variant`
+
+**型:** `'primary' | 'secondary' | 'minimal'`  
+**デフォルト:** `'primary'`
+
+リンクボタンの外観。
+`primary`はテーマのアクセントカラーを使用して目立つコールトゥアクションリンクを作成し、`secondary`はそれほど目立たないリンク、`minimal`は最小限のスタイルのリンクを作成します。
+
+### `icon`
+
+**型:** `string`
+
+リンクボタンにアイコンを含めるための属性。これは[Starlightの組み込みアイコン](/ja/reference/icons/#すべてのアイコン)の名前を指定します。
+
+### `iconPlacement`
+
+**型:** `'start' | 'end'`  
+**デフォルト:** `'end'`
+
+アイコンの配置をテキストの前後どちらにするかを指定します。
diff --git a/docs/src/content/docs/ja/components/link-cards.mdx b/docs/src/content/docs/ja/components/link-cards.mdx
new file mode 100644
index 00000000000..28abf82b7e3
--- /dev/null
+++ b/docs/src/content/docs/ja/components/link-cards.mdx
@@ -0,0 +1,124 @@
+---
+title: リンクカード
+description: Starlightでリンクを目立つカードとして表示する方法を学びます。
+sidebar:
+  order: 3
+---
+
+import { LinkCard } from '@astrojs/starlight/components';
+
+異なるページへのリンクを目立たせて表示するには、`<LinkCard>`コンポーネントを使用します。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+	<LinkCard
+		slot="preview"
+		title="Starlightのカスタマイズ"
+		description="カスタムスタイル、フォントなどを使用して、Starlightサイトを自分のものにする方法を学びます。"
+		href="/ja/guides/customization/"
+	/>
+</Preview>
+
+## インポート
+
+```tsx
+import { LinkCard } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+`<LinkCard>`コンポーネントを使用して、リンクを目立たせて表示します。
+各`<LinkCard>`には[`title`](#title)と[`href`](#href)属性が必要です。
+
+<Preview>
+
+```mdx
+import { LinkCard } from '@astrojs/starlight/components';
+
+<LinkCard title="Markdownの作成" href="/ja/guides/authoring-content/" />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% linkcard title="Markdownの作成" href="/ja/guides/authoring-content/" /%}
+```
+
+</Fragment>
+
+<LinkCard
+	slot="preview"
+	title="Markdownの作成"
+	href="/ja/guides/authoring-content/"
+/>
+  
+</Preview>
+
+### リンクの説明を追加する
+
+[`description`](#description)属性を使用して、リンクカードに短い説明を追加します。
+
+<Preview>
+
+```mdx {6}
+import { LinkCard } from '@astrojs/starlight/components';
+
+<LinkCard
+	title="国際化"
+	href="/ja/guides/i18n/"
+	description="複数の言語をサポートするようにStarlightを設定します。"
+/>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc {4}
+{% linkcard
+   title="国際化"
+	 href="/ja/guides/i18n/"
+	 description="複数の言語をサポートするようにStarlightを設定します。" /%}
+```
+
+</Fragment>
+
+<LinkCard
+	slot="preview"
+	title="国際化"
+	href="/ja/guides/i18n/"
+	description="複数の言語をサポートするようにStarlightを設定します。"
+/>
+  
+</Preview>
+
+### リンクカードをグループ化する
+
+[`<CardGrid>`](/ja/components/card-grids/)コンポーネントを使用してグループ化することで、十分なスペースがある場合に複数のリンクカードを並べて表示できます。
+
+例については、["リンクカードのグループ化"](/ja/components/card-grids/#リンクカードをグループ化する)ガイドを参照してください。
+
+## `<LinkCard>` プロパティ
+
+**実装:** [`LinkCard.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/LinkCard.astro)
+
+`<LinkCard>`コンポーネントは、以下のプロパティおよび他のすべての[`<a>`要素の属性](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)を受け入れます：
+
+### `title`
+
+**必須**  
+**型:** `string`
+
+表示するリンクカードのタイトル。
+
+### `href`
+
+**必須**  
+**型:** `string`
+
+カードが操作されたときにリンクするURL。
+
+### `description`
+
+**型:** `string`
+
+タイトルの下に表示するオプションの説明。
diff --git a/docs/src/content/docs/ja/components/steps.mdx b/docs/src/content/docs/ja/components/steps.mdx
new file mode 100644
index 00000000000..c12cf810e74
--- /dev/null
+++ b/docs/src/content/docs/ja/components/steps.mdx
@@ -0,0 +1,120 @@
+---
+title: ステップ
+description: Starlightでタスクの番号付きリストをスタイル設定してステップバイステップのガイドを作成する方法を学びましょう。
+---
+
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+
+タスクの番号付きリストをスタイル設定してステップバイステップのガイドを作成するには、`<Steps>`コンポーネントを使用します。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<Steps slot="preview">
+
+1. 新しいStarlightプロジェクトを作成します:
+
+   <Tabs syncKey="pkg">
+
+   <TabItem label="npm">
+
+   ```sh
+   npm create astro@latest -- --template starlight
+   ```
+
+   </TabItem>
+
+   <TabItem label="pnpm">
+
+   ```sh
+   pnpm create astro --template starlight
+   ```
+
+   </TabItem>
+
+   <TabItem label="Yarn">
+
+   ```sh
+   yarn create astro --template starlight
+   ```
+
+   </TabItem>
+
+   </Tabs>
+
+2. 最初のドキュメントページを書きます。
+
+</Steps>
+
+</Preview>
+
+## インポート
+
+```tsx
+import { Steps } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+`<Steps>`コンポーネントを使用して、タスクの番号付きリストをスタイル設定します。
+各ステップを明確に強調する必要がある、より複雑なステップバイステップガイドに役立ちます。
+
+`<Steps>`で標準のMarkdownの順序付きリストを囲みます。
+通常のMarkdown構文はすべて`<Steps>`内で適用されます。
+
+<Preview>
+
+````mdx
+import { Steps } from '@astrojs/starlight/components';
+
+<Steps>
+
+1. コンポーネントをMDXファイルにインポートします:
+
+   ```js
+   import { Steps } from '@astrojs/starlight/components';
+   ```
+
+2. 順序付きリストのアイテムを`<Steps>`で囲みます。
+
+</Steps>
+````
+
+<Fragment slot="markdoc">
+
+````markdoc
+{% steps %}
+
+1. コンポーネントをMDXファイルにインポートします:
+
+   ```js
+   import { Steps } from '@astrojs/starlight/components';
+   ```
+
+2. 順序付きリストのアイテムを`<Steps>`で囲みます。
+
+{% /steps %}
+````
+
+</Fragment>
+
+<Steps slot="preview">
+
+1. コンポーネントをMDXファイルにインポートします:
+
+   ```js
+   import { Steps } from '@astrojs/starlight/components';
+   ```
+
+2. 順序付きリストのアイテムを`<Steps>`で囲みます。
+
+</Steps>
+
+</Preview>
+
+## `<Steps>` プロパティ
+
+**実装:** [`Steps.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Steps.astro)
+
+`<Steps>`コンポーネントはプロパティを受け付けません。
diff --git a/docs/src/content/docs/ja/components/tabs.mdx b/docs/src/content/docs/ja/components/tabs.mdx
new file mode 100644
index 00000000000..8149149584a
--- /dev/null
+++ b/docs/src/content/docs/ja/components/tabs.mdx
@@ -0,0 +1,221 @@
+---
+title: タブ
+description: Starlightで同等の情報をグループ化するためのタブインターフェースを作成する方法を学びましょう。
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+タブインターフェースを作成するには、`<Tabs>`と`<TabItem>`コンポーネントを使用します。
+タブは、ユーザーが複数のオプションのうち1つだけを見る必要がある場合に、同等の情報をグループ化するのに便利です。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<Tabs slot="preview">
+	<TabItem label="星">シリウス、ベガ、ベテルギウス</TabItem>
+	<TabItem label="衛星">イオ、エウロパ、ガニメデ</TabItem>
+</Tabs>
+
+</Preview>
+
+## インポート
+
+```tsx
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+`<Tabs>`と`<TabItem>`コンポーネントを使用してタブインターフェースを表示します。
+各`<TabItem>`には、ユーザーに表示される[`label`](#label)が必要です。
+
+<Preview>
+
+```mdx
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+<Tabs>
+	<TabItem label="星">シリウス、ベガ、ベテルギウス</TabItem>
+	<TabItem label="衛星">イオ、エウロパ、ガニメデ</TabItem>
+</Tabs>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% tabs %}
+{% tabitem label="星" %}
+シリウス、ベガ、ベテルギウス
+{% /tabitem %}
+
+{% tabitem label="衛星" %}
+イオ、エウロパ、ガニメデ
+{% /tabitem %}
+{% /tabs %}
+```
+
+</Fragment>
+
+<Tabs slot="preview">
+	<TabItem label="星">シリウス、ベガ、ベテルギウス</TabItem>
+	<TabItem label="衛星">イオ、エウロパ、ガニメデ</TabItem>
+</Tabs>
+
+</Preview>
+
+### タブを同期させる
+
+複数のタブグループを同期させるには、[`syncKey`](#synckey)属性を追加します。
+
+ページ上のすべての`<Tabs>`に同じ`syncKey`値を設定すると、同じアクティブなラベルが表示されます。
+これにより、読者は一度選択（例: オペレーティングシステムやパッケージマネージャー）すると、その選択がページを移動しても保持されます。
+
+関連するタブを同期させるには、各`<Tabs>`コンポーネントに同じ`syncKey`プロパティを追加し、同じ`<TabItem>`ラベルを使用してください。
+
+<Preview>
+
+```mdx 'syncKey="constellations"'
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+_いくつかの星:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="オリオン座">ベラトリックス、リゲル、ベテルギウス</TabItem>
+	<TabItem label="ふたご座">ポルックス、カストルA、カストルB</TabItem>
+</Tabs>
+
+_いくつかのエキソプラネット:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="オリオン座">HD 34445 b、グリーゼ 179 b、Wasp-82 b</TabItem>
+	<TabItem label="ふたご座">ポルックスb、HAT-P-24b、HD 50554 b</TabItem>
+</Tabs>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'syncKey="constellations"'
+_いくつかの星:_
+
+{% tabs syncKey="constellations" %}
+{% tabitem label="オリオン座" %}
+ベラトリックス、リゲル、ベテルギウス
+{% /tabitem %}
+
+{% tabitem label="ふたご座" %}
+ポルックス、カストルA、カストルB
+{% /tabitem %}
+{% /tabs %}
+
+_いくつかのエキソプラネット:_
+
+{% tabs syncKey="constellations" %}
+{% tabitem label="オリオン座" %}
+HD 34445 b、グリーゼ 179 b、Wasp-82 b
+{% /tabitem %}
+
+{% tabitem label="ふたご座" %}
+ポルックスb、HAT-P-24b、HD 50554 b
+{% /tabitem %}
+{% /tabs %}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+
+_いくつかの星:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="オリオン座">ベラトリックス、リゲル、ベテルギウス</TabItem>
+	<TabItem label="ふたご座">ポルックス、カストルA、カストルB</TabItem>
+</Tabs>
+
+_いくつかのエキソプラネット:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="オリオン座">HD 34445 b、グリーゼ 179 b、Wasp-82 b</TabItem>
+	<TabItem label="ふたご座">ポルックスb、HAT-P-24b、HD 50554 b</TabItem>
+</Tabs>
+
+</Fragment>
+
+</Preview>
+
+### タブにアイコンを追加する
+
+[`icon`](#icon)属性を使用してタブ項目にアイコンを追加し、[Starlightの組み込みアイコン](/ja/reference/icons/#すべてのアイコン)の名前を指定して、ラベルの横にアイコンを表示します。
+
+<Preview>
+
+```mdx /icon="\w+"/
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+<Tabs>
+	<TabItem label="星" icon="star">
+		シリウス、ベガ、ベテルギウス
+	</TabItem>
+	<TabItem label="衛星" icon="moon">
+		イオ、エウロパ、ガニメデ
+	</TabItem>
+</Tabs>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc /icon="\w+"/
+{% tabs %}
+{% tabitem label="星" icon="star" %}
+シリウス、ベガ、ベテルギウス
+{% /tabitem %}
+
+{% tabitem label="衛星" icon="moon" %}
+イオ、エウロパ、ガニメデ
+{% /tabitem %}
+{% /tabs %}
+```
+
+</Fragment>
+
+<Tabs slot="preview">
+	<TabItem label="星" icon="star">
+		シリウス、ベガ、ベテルギウス
+	</TabItem>
+	<TabItem label="衛星" icon="moon">
+		イオ、エウロパ、ガニメデ
+	</TabItem>
+</Tabs>
+
+</Preview>
+
+## `<Tabs>` プロパティ
+
+**実装:** [`Tabs.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Tabs.astro)
+
+`<Tabs>`コンポーネントは複数の`<TabItem>`コンポーネントをグループ化し、以下のプロパティを受け付けます。
+
+### `syncKey`
+
+**型:** `string`
+
+複数のページにわたってタブグループを同期させるためのキー。
+
+## `<TabItem>` プロパティ
+
+**実装:** [`TabItem.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/TabItem.astro)
+
+タブは複数のタブ項目から構成され、それぞれ以下のプロパティを持ちます。
+
+### `label`
+
+**必須**  
+**型:** `string`
+
+タブ項目には、タブに表示されるテキストを指定する`label`属性が必要です。
+
+### `icon`
+
+**型:** `string`
+
+各タブ項目には、ラベルの横に表示される[Starlightに組み込まれたアイコン](/ja/reference/icons/#すべてのアイコン)を指定する`icon`属性を設定できます。
diff --git a/docs/src/content/docs/ja/components/using-components.mdx b/docs/src/content/docs/ja/components/using-components.mdx
new file mode 100644
index 00000000000..55aa73fda07
--- /dev/null
+++ b/docs/src/content/docs/ja/components/using-components.mdx
@@ -0,0 +1,96 @@
+---
+title: コンポーネントの使用
+description: StarlightでMDXとMarkdocにコンポーネントを使用する。
+sidebar:
+  order: 1
+---
+
+コンポーネントを使用すると、UIの一部やスタイリングを一貫して簡単に再利用できます。
+例えば、リンクカードやYouTube埋め込みなどが挙げられます。
+Starlightは[MDX](https://mdxjs.com/)と[Markdoc](https://markdoc.dev/)ファイルでのコンポーネントの使用をサポートし、いくつかの一般的なコンポーネントを提供しています。
+
+[Astro Docsでコンポーネントの構築についてさらに学ぶ](https://docs.astro.build/ja/basics/astro-components/)。
+
+## MDXでコンポーネントを使用する
+
+コンポーネントを使用するには、MDXファイルにインポートし、JSXタグとしてレンダリングします。
+これらはHTMLタグのように見えますが、`import`文の名前に一致する大文字で始まります：
+
+```mdx
+---
+# src/content/docs/example.mdx
+title: 私のドキュメントへようこそ
+---
+
+import { Icon } from '@astrojs/starlight/components';
+import CustomCard from '../../components/CustomCard.astro';
+
+<Icon name="open-book" />
+
+<CustomCard>
+	コンポーネントには**ネストされたコンテンツ**も含めることができます。
+</CustomCard>
+```
+
+StarlightはAstroを基盤としているため、MDXファイルで[サポートされているUIフレームワーク（React、Preact、Svelte、Vue、Solid、Alpine）](https://docs.astro.build/ja/core-concepts/framework-components/)で構築されたコンポーネントのサポートを追加できます。
+Astroドキュメントの[MDXでのコンポーネントの使用](https://docs.astro.build/ja/guides/integrations-guide/mdx/#using-components-in-mdx)についてさらに学んでください。
+
+## Markdocでコンポーネントを使用する
+
+[Markdocセットアップガイド](/ja/guides/authoring-content/#markdoc)に従って、Markdocでコンテンツを作成するためのサポートを追加してください。
+
+Starlight Markdocプリセットを使用すると、Markdocの`{% %}`タグ構文でStarlightの組み込みコンポーネントを使用できます。
+MDXとは異なり、Markdocのコンポーネントはインポートする必要がありません。
+以下の例は、MarkdocファイルでのStarlightの[カードコンポーネント](/ja/components/cards/)のレンダリングを示しています：
+
+```markdoc
+---
+# src/content/docs/example.mdoc
+title: 私のドキュメントへようこそ
+---
+
+{% card title="星" icon="star" %}
+シリウス、ベガ、ベテルギウス
+{% /card %}
+```
+
+Markdocファイルでのコンポーネントの使用方法についての詳細は、[Astro Markdoc統合ドキュメント](https://docs.astro.build/ja/guides/integrations-guide/markdoc/#render-components)を参照してください。
+
+## 組み込みコンポーネント
+
+Starlightは、一般的なドキュメントのユースケースに対応した組み込みコンポーネントを提供しています。
+これらのコンポーネントは、MDXファイルでは`@astrojs/starlight/components`パッケージから、Markdocファイルでは[Starlight Markdocプリセット](/ja/guides/authoring-content/#markdoc)から利用できます。
+
+利用可能なコンポーネントとその使用方法のリストについては、サイドバーを参照してください。
+
+## Starlightのスタイルとの互換性
+
+Starlightは、Markdownコンテンツにデフォルトのスタイリングを適用します。例えば、要素間にマージンを追加します。
+これらのスタイルがコンポーネントの外観と競合する場合は、`not-content`クラスをコンポーネントに設定して無効化できます。
+
+```astro 'class="not-content"'
+---
+// src/components/Example.astro
+---
+
+<div class="not-content">
+	<p>Starlightのデフォルトのコンテンツスタイリングの影響を受けません。</p>
+</div>
+```
+
+## コンポーネントのprops
+
+`astro/types`からの[`ComponentProps`](https://docs.astro.build/ja/guides/typescript/#componentprops%E5%9E%8B)タイプを使用して、コンポーネント自体がエクスポートしていない場合でも、コンポーネントが受け入れる`Props`を参照できます。
+これは、既存のコンポーネントをラップまたは拡張する際に役立ちます。
+
+以下の例では、`ComponentProps`を使用してStarlightの組み込み`Icon`コンポーネントが受け入れるpropsのタイプを取得しています：
+
+```astro
+---
+// src/components/Example.astro
+import type { ComponentProps } from 'astro/types';
+import { Icon } from '@astrojs/starlight/icon';
+
+type IconProps = ComponentProps<typeof Icon>;
+---
+```
diff --git a/docs/src/content/docs/ja/guides/authoring-content.md b/docs/src/content/docs/ja/guides/authoring-content.mdx
similarity index 83%
rename from docs/src/content/docs/ja/guides/authoring-content.md
rename to docs/src/content/docs/ja/guides/authoring-content.mdx
index b55fa1a4503..9ffd8855a36 100644
--- a/docs/src/content/docs/ja/guides/authoring-content.md
+++ b/docs/src/content/docs/ja/guides/authoring-content.mdx
@@ -200,8 +200,8 @@ Starlightの便利な機能のおかげで、ユーザーはより生産的に
 ```js
 // シンタックスハイライトされたJavascriptコード。
 var fun = function lang(l) {
-  dateformat.i18n = require('./lang/' + l);
-  return true;
+	dateformat.i18n = require('./lang/' + l);
+	return true;
 };
 ```
 
@@ -209,8 +209,8 @@ var fun = function lang(l) {
 ```js
 // シンタックスハイライトされたJavascriptコード。
 var fun = function lang(l) {
-  dateformat.i18n = require('./lang/' + l);
-  return true;
+	dateformat.i18n = require('./lang/' + l);
+	return true;
 };
 ```
 ````
@@ -231,16 +231,16 @@ Expressive Codeには、コードサンプルの外観をカスタマイズす
 
   ```js {2-3}
   function demo() {
-    // この行（2行目）と次の行はハイライトされます
-    return 'このスニペットの3行目です';
+  	// この行（2行目）と次の行はハイライトされます
+  	return 'このスニペットの3行目です';
   }
   ```
 
   ````md
   ```js {2-3}
   function demo() {
-    // この行（2行目）と次の行はハイライトされます
-    return 'このスニペットの3行目です';
+  	// この行（2行目）と次の行はハイライトされます
+  	return 'このスニペットの3行目です';
   }
   ```
   ````
@@ -250,7 +250,7 @@ Expressive Codeには、コードサンプルの外観をカスタマイズす
   ```js "個別の用語" /正規表現.*います/
   // 個別の用語もハイライトできます
   function demo() {
-    return '正規表現もサポートされています';
+  	return '正規表現もサポートされています';
   }
   ```
 
@@ -258,7 +258,7 @@ Expressive Codeには、コードサンプルの外観をカスタマイズす
   ```js "個別の用語" /正規表現.*います/
   // 個別の用語もハイライトできます
   function demo() {
-    return '正規表現もサポートされています';
+  	return '正規表現もサポートされています';
   }
   ```
   ````
@@ -267,18 +267,18 @@ Expressive Codeには、コードサンプルの外観をカスタマイズす
 
   ```js "return true;" ins="挿入" del="削除"
   function demo() {
-    console.log('これらは挿入と削除のマーカーです');
-    // return文はデフォルトのマーカータイプを使用します
-    return true;
+  	console.log('これらは挿入と削除のマーカーです');
+  	// return文はデフォルトのマーカータイプを使用します
+  	return true;
   }
   ```
 
   ````md
   ```js "return true;" ins="挿入" del="削除"
   function demo() {
-    console.log('これらは挿入と削除のマーカーです');
-    // return文はデフォルトのマーカータイプを使用します
-    return true;
+  	console.log('これらは挿入と削除のマーカーです');
+  	// return文はデフォルトのマーカータイプを使用します
+  	return true;
   }
   ```
   ````
@@ -356,3 +356,119 @@ Starlightは、リストやテーブルなど、その他のMarkdown記法をす
 ## 高度なMarkdownとMDXの設定
 
 Starlightは、remarkとrehypeをベースとした、AstroのMarkdown・MDXレンダラーを使用しています。Astroの設定ファイルに`remarkPlugins`または`rehypePlugins`を追加することで、カスタム構文や動作をサポートできます。詳しくは、Astroドキュメントの[「MarkdownとMDXの設定」](https://docs.astro.build/ja/guides/markdown-content/#markdownとmdxの設定)を参照してください。
+
+## Markdoc
+
+Starlightは、実験的な[Astro Markdoc統合](https://docs.astro.build/ja/guides/integrations-guide/markdoc/)とStarlight Markdocプリセットを使用して、Markdocでのコンテンツ作成をサポートしています。
+
+### Markdocで新しいプロジェクトを作成する
+
+`create astro`を使用して、Markdocが事前設定された新しいStarlightプロジェクトを開始します：
+
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+
+<Tabs syncKey="pkg">
+<TabItem label="npm">
+
+```sh
+npm create astro@latest -- --template starlight/markdoc
+```
+
+</TabItem>
+<TabItem label="pnpm">
+
+```sh
+pnpm create astro --template starlight/markdoc
+```
+
+</TabItem>
+<TabItem label="Yarn">
+
+```sh
+yarn create astro --template starlight/markdoc
+```
+
+</TabItem>
+
+</Tabs>
+
+### 既存のプロジェクトにMarkdocを追加する
+
+既にStarlightサイトがあり、Markdocを追加したい場合は、以下の手順に従ってください。
+
+<Steps>
+
+1.  AstroのMarkdoc統合を追加します：
+
+    <Tabs syncKey="pkg">
+
+    <TabItem label="npm">
+
+    ```sh
+    npx astro add markdoc
+    ```
+
+    </TabItem>
+
+    <TabItem label="pnpm">
+
+    ```sh
+    pnpm astro add markdoc
+    ```
+
+    </TabItem>
+
+    <TabItem label="Yarn">
+
+    ```sh
+    yarn astro add markdoc
+    ```
+
+    </TabItem>
+
+    </Tabs>
+
+2.  Starlight Markdocプリセットをインストールします：
+
+    <Tabs syncKey="pkg">
+
+    <TabItem label="npm">
+
+    ```sh
+    npm install @astrojs/starlight-markdoc
+    ```
+
+    </TabItem>
+
+    <TabItem label="pnpm">
+
+    ```sh
+    pnpm add @astrojs/starlight-markdoc
+    ```
+
+    </TabItem>
+
+    <TabItem label="Yarn">
+
+    ```sh
+    yarn add @astrojs/starlight-markdoc
+    ```
+
+    </TabItem>
+
+    </Tabs>
+
+3.  `markdoc.config.mjs`にMarkdoc設定ファイルを作成し、Starlight Markdocプリセットを使用します：
+
+    ```js
+    import { defineMarkdocConfig } from '@astrojs/markdoc/config';
+    import starlightMarkdoc from '@astrojs/starlight-markdoc';
+
+    export default defineMarkdocConfig({
+    	extends: [starlightMarkdoc()],
+    });
+    ```
+
+</Steps>
+
+Markdocの構文と機能についてさらに学ぶには、[Markdocのドキュメント](https://markdoc.dev/docs/syntax)または[Astro Markdoc統合ガイド](https://docs.astro.build/ja/guides/integrations-guide/markdoc/)を参照してください。
diff --git a/docs/src/content/docs/ja/reference/icons.mdx b/docs/src/content/docs/ja/reference/icons.mdx
new file mode 100644
index 00000000000..8099acdc3fc
--- /dev/null
+++ b/docs/src/content/docs/ja/reference/icons.mdx
@@ -0,0 +1,19 @@
+---
+title: アイコン
+description: Starlightで利用可能なすべてのアイコンの概要。
+---
+
+Starlightには、`<Icon>`コンポーネントを使用してコンテンツに表示できる組み込みのアイコンセットが用意されています。
+
+## アイコンの使用
+
+アイコンは[`<Icon>`](/ja/components/icons/)コンポーネントを使用して表示できます。
+また、[カード](/ja/components/cards/)や[ヒーローアクション](/ja/reference/frontmatter/#hero)などの設定のような他のコンポーネントでもよく使用されます。
+
+## すべてのアイコン
+
+利用可能なすべてのアイコンとその関連名が以下にリストされています。アイコンをクリックすると、その名前がクリップボードにコピーされます。
+
+import IconsList from '~/components/icons-list.astro';
+
+<IconsList />