---
title: Prose
description: "`Prose` is a component that styles HTML content."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/prose/prose.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/prose
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-prose--basic
---

# Prose

`Prose` is a component that styles HTML content.

```tsx
<Prose>
  <h1>俺だけレベルアップな件</h1>

  <p>
    人類最弱兵器と呼ばれるE級ハンター、水篠旬。二重ダンジョンから生還した彼にだけ、
    <a href="https://sololeveling-anime.net/">新たな物語</a>
    の幕が開く。
  </p>

  <h2>あらすじ</h2>

  <p>
    死の淵で謎のシステムに選ばれた旬は、<em>唯一のプレイヤー</em>
    として成長する力を手に入れる。クエストと戦いを重ねながら、 ゲートに
    <strong>隠された秘密</strong>へと近づいていく。
  </p>

  <h3>登場人物</h3>

  <ul>
    <li>水篠 旬</li>
    <li>
      ハンタースギルド
      <ol>
        <li>最上 真</li>
        <li>向坂 雫</li>
      </ol>
    </li>
    <li>
      白虎ギルド
      <ol>
        <li>白川 大虎</li>
      </ol>
    </li>
    <li>
      ハンター協会
      <ol>
        <li>後藤 清臣</li>
        <li>犬飼 晃</li>
      </ol>
    </li>
  </ul>

  <h3>セリフ</h3>

  <figure>
    <blockquote>
      <p>起きろ。</p>
    </blockquote>
    <figcaption>
      水篠旬 - <cite>俺だけレベルアップな件</cite>
    </figcaption>
  </figure>

  <hr />

  <figure>
    <blockquote>
      <p>兄貴！</p>
    </blockquote>
    <figcaption>
      諸菱賢太 - <cite>俺だけレベルアップな件</cite>
    </figcaption>
  </figure>

  <h3>影の軍団</h3>

  <table>
    <thead>
      <tr>
        <th scope="col">名前</th>
        <th scope="col">役割</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>イグリット</td>
        <td>先陣を切る騎士</td>
      </tr>
      <tr>
        <td>ベル</td>
        <td>圧倒的な力で敵を制圧する兵士</td>
      </tr>
      <tr>
        <td>アイアン</td>
        <td>仲間を守る重装兵</td>
      </tr>
    </tbody>
  </table>

  <h3>ステータス</h3>

  <p>
    <code>プレイヤー情報</code>を確認するには、
    <kbd>Enter</kbd>を押してください。
  </p>

  <pre>
    <code>
      {
        'const player = {\n  name: "水篠旬",\n  role: "影の君主",\n  skills: ["影の抽出", "影の保存"],\n}'
      }
    </code>
  </pre>
</Prose>
```

## Usage

```tsx
import { Prose } from "@yamada-ui/react"
```

```tsx
import { Prose } from "@/components/ui"
```

```tsx
import { Prose } from "@workspaces/ui"
```

```tsx
<Prose />
```

### Change Variant

#### Code

```tsx
<VStack>
  <For each={["solid", "subtle", "surface", "outline"]}>
    {(code, index) => (
      <Prose key={index} code={code}>
        <p>
          <code>プレイヤー情報</code>を確認するには、
          <kbd>Enter</kbd>を押してください。
        </p>
      </Prose>
    )}
  </For>
</VStack>
```

#### Keyboard

```tsx
<VStack>
  <For each={["solid", "subtle", "surface", "outline"]}>
    {(kbd, index) => (
      <Prose key={index} kbd={kbd}>
        <p>
          <code>プレイヤー情報</code>を確認するには、
          <kbd>Enter</kbd>を押してください。
        </p>
      </Prose>
    )}
  </For>
</VStack>
```

#### Blockquote

```tsx
<VStack>
  <For each={["solid", "subtle"]}>
    {(blockquote, index) => (
      <Prose key={index} blockquote={blockquote}>
        <figure>
          <blockquote>
            <p>起きろ。</p>
          </blockquote>
          <figcaption>
            水篠旬 - <cite>俺だけレベルアップな件</cite>
          </figcaption>
        </figure>

        <hr />

        <figure>
          <blockquote>
            <p>兄貴！</p>
          </blockquote>
          <figcaption>
            諸菱賢太 - <cite>俺だけレベルアップな件</cite>
          </figcaption>
        </figure>
      </Prose>
    )}
  </For>
</VStack>
```

#### Table

```tsx
<VStack>
  <For each={["line", "outline"]}>
    {(table, index) => (
      <Prose key={index} table={table}>
        <table>
          <thead>
            <tr>
              <th scope="col">名前</th>
              <th scope="col">役割</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>イグリット</td>
              <td>先陣を切る騎士</td>
            </tr>
            <tr>
              <td>ベル</td>
              <td>圧倒的な力で敵を制圧する兵士</td>
            </tr>
            <tr>
              <td>アイアン</td>
              <td>仲間を守る重装兵</td>
            </tr>
          </tbody>
        </table>
      </Prose>
    )}
  </For>
</VStack>
```

#### Link

```tsx
<VStack>
  <For each={["plain", "underline"]}>
    {(link, index) => (
      <Prose key={index} link={link}>
        <p>
          人類最弱兵器と呼ばれるE級ハンター、水篠旬。二重ダンジョンから生還した彼にだけ、
          <a href="https://sololeveling-anime.net/">新たな物語</a>
          の幕が開く。
        </p>
      </Prose>
    )}
  </For>
</VStack>
```

#### Separator

```tsx
<VStack>
  <For each={["solid", "dashed", "dotted"]}>
    {(hr, index) => (
      <Prose key={index} hr={hr}>
        <figure>
          <blockquote>
            <p>起きろ。</p>
          </blockquote>
          <figcaption>
            水篠旬 - <cite>俺だけレベルアップな件</cite>
          </figcaption>
        </figure>

        <hr />

        <figure>
          <blockquote>
            <p>兄貴！</p>
          </blockquote>
          <figcaption>
            諸菱賢太 - <cite>俺だけレベルアップな件</cite>
          </figcaption>
        </figure>
      </Prose>
    )}
  </For>
</VStack>
```

### Change Size

```tsx
<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <Prose key={index} size={size}>
        <h1>俺だけレベルアップな件</h1>

        <p>
          人類最弱兵器と呼ばれるE級ハンター、水篠旬。二重ダンジョンから生還した彼にだけ、
          <a href="https://sololeveling-anime.net/">新たな物語</a>
          の幕が開く。
        </p>

        <h2>あらすじ</h2>

        <p>
          死の淵で謎のシステムに選ばれた旬は、<em>唯一のプレイヤー</em>
          として成長する力を手に入れる。クエストと戦いを重ねながら、 ゲートに
          <strong>隠された秘密</strong>へと近づいていく。
        </p>
      </Prose>
    )}
  </For>
</VStack>
```

### Change Color Scheme

```tsx
<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <Prose key={index} colorScheme={colorScheme}>
        <p>
          <code>プレイヤー情報</code>を確認するには、
          <kbd>Enter</kbd>を押してください。
        </p>
      </Prose>
    )}
  </For>
</VStack>
```

### React Markdown

```ts
import Markdown from "react-markdown"
import remarkGfm from "remark-gfm"
```

```tsx preview
<Prose>
  <Markdown remarkPlugins={[remarkGfm]}>
    {`### 影の軍団

| 名前 | 役割 |
| --- | --- |
| イグリット | 先陣を切る騎士 |
| ベル | 圧倒的な力で敵を制圧する兵士 |
| アイアン | 仲間を守る重装兵 |
`}
  </Markdown>
</Prose>
```

### Render HTML

```tsx
<Prose
  dangerouslySetInnerHTML={{
    __html:
      "<h2>影の軍団</h2><p>影の君主のもとに、新たな仲間が集う。</p><ul><li>イグリット</li><li>ベル</li><li>アイアン</li></ul>",
  }}
/>
```

### Exclude

```tsx
<Prose>
  <h2>ダンジョン攻略記録</h2>
  <p>任務を終えた水篠旬は、ハンター協会に報告へ向かう。</p>
  <div className="not-prose">
    <h2>ハンター協会の掲示板</h2>
    <p>
      本日の任務は<code>E級ダンジョン</code>の調査です。
    </p>
  </div>
  <p>報告を終えた旬は、次のゲートへと向かった。</p>
</Prose>
```

## Props

| Prop          | Default     | Type                                                                                                                      | Description                                |
| ------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -           | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -           | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -           | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -           | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `size`        | `"md"`      | `"lg" \| "md" \| "sm"`                                                                                                    | The size of the component.                 |
| `blockquote`  | `"subtle"`  | `"solid" \| "subtle" \| "plain"`                                                                                          | The variant of blockquotes.                |
| `code`        | `"subtle"`  | `"outline" \| "solid" \| "subtle" \| "surface"`                                                                           | The variant of inline code.                |
| `hr`          | -           | `"dashed" \| "dotted" \| "solid"`                                                                                         | The variant of separators.                 |
| `kbd`         | `"outline"` | `"outline" \| "solid" \| "subtle" \| "surface"`                                                                           | The variant of keyboard keys.              |
| `link`        | `"plain"`   | `"plain" \| "underline"`                                                                                                  | The variant of links.                      |
| `table`       | `"line"`    | `"line" \| "outline"`                                                                                                     | The variant of tables.                     |

## Similar Components

- [Blockquote](https://yamada-ui.com/docs/components/blockquote.md): `Blockquote` is a component that represents a quotation. By default, it renders a `blockquote` element.
- [Code](https://yamada-ui.com/docs/components/code.md): `Code` is a component that represents a code block. By default, it renders a `code` element.
- [Em](https://yamada-ui.com/docs/components/em.md): `Em` is a component that represents emphasized text. By default, it renders a `em` element.
- [Heading](https://yamada-ui.com/docs/components/heading.md): `Heading` is a component that represents section headings. By default, it renders an `h1` element.
- [Highlight](https://yamada-ui.com/docs/components/highlight.md): `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.
- [Kbd](https://yamada-ui.com/docs/components/kbd.md): `Kbd` is a component that represents keyboard input.
- [Mark](https://yamada-ui.com/docs/components/mark.md): `Mark` is a component that emphasizes a specific part of the text.
- [Text](https://yamada-ui.com/docs/components/text.md): `Text` is a component that represents a paragraph of text. By default, it renders a `p` element.

## Uses Components & Hooks

- [Blockquote](https://yamada-ui.com/docs/components/blockquote.md): `Blockquote` is a component that represents a quotation. By default, it renders a `blockquote` element.
- [Code](https://yamada-ui.com/docs/components/code.md): `Code` is a component that represents a code block. By default, it renders a `code` element.
- [Heading](https://yamada-ui.com/docs/components/heading.md): `Heading` is a component that represents section headings. By default, it renders an `h1` element.
- [Link](https://yamada-ui.com/docs/components/link.md): `Link` is a component for creating hyperlinks to different web pages, locations within the same page, or other URLs.
- [List](https://yamada-ui.com/docs/components/list.md): `List` is a component for displaying lists. By default, it renders a `ul` element.
- [NativeTable](https://yamada-ui.com/docs/components/native-table.md): `NativeTable` is a component for efficiently organizing and displaying data.
- [Separator](https://yamada-ui.com/docs/components/separator.md): `Separator` is a component that represents a division between elements.