---
title: Blockquote
description: "`Blockquote` is a component that represents a quotation. By default, it renders a `blockquote` element."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/blockquote/blockquote.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/blockquote
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-blockquote--basic
---

```tsx
<Blockquote.Root citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール">
  地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
</Blockquote.Root>
```

## Usage

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

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

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

```tsx
<Blockquote.Root>
  <Blockquote.Content />
  <Blockquote.Caption>
    <Blockquote.Cite />
  </Blockquote.Caption>
</Blockquote.Root>
```

### Change Variant

```tsx
<VStack>
  <For
    each={[
      {
        variant: "solid",
      },
      {
        variant: "subtle",
      },
      {
        variant: "plain",
      },
    ]}
  >
    {({ variant }, index) => (
      <Blockquote.Root
        key={index}
        variant={variant}
        citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
      >
        地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
      </Blockquote.Root>
    )}
  </For>
</VStack>
```

### Display Citation

To display the source of the quote, set to `cite`.

```tsx
<VStack>
  <Blockquote.Root
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote.Root>

  <Blockquote.Root
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
    withDash
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote.Root>
</VStack>
```

### Display Icon

To display an icon, set a `ReactNode` to `icon`.

```tsx
<Blockquote.Root
  variant="plain"
  cite="Wikipedia"
  citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
  icon={<Blockquote.Icon />}
>
  地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
</Blockquote.Root>
```

### Change Alignment

To change the alignment, set `justify` to `"start"`, `"center"`, or `"end"`. The default is `"start"`.

```tsx
<VStack>
  <For each={["start", "center", "end"]}>
    {(justify, index) => (
      <Blockquote.Root
        key={index}
        cite="Wikipedia"
        citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
        justify={justify}
      >
        地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
      </Blockquote.Root>
    )}
  </For>
</VStack>
```

### Customize

```tsx
<VStack>
  <Blockquote.Root
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
    captionProps={{
      alignSelf: "center",
    }}
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote.Root>

  <Blockquote.Root citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール">
    <Blockquote.Content>
      地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
    </Blockquote.Content>

    <Blockquote.Caption alignSelf="end">
      <Blockquote.Cite>Wikipedia</Blockquote.Cite>
    </Blockquote.Caption>
  </Blockquote.Root>
</VStack>
```

```tsx
<VStack>
  <Blockquote.Root
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
    citeProps={{
      color: "link",
    }}
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote.Root>

  <Blockquote.Root citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール">
    <Blockquote.Content>
      地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
    </Blockquote.Content>

    <Blockquote.Caption>
      <Blockquote.Cite color="secondary">Wikipedia</Blockquote.Cite>
    </Blockquote.Caption>
  </Blockquote.Root>
</VStack>
```

## Props

### Blockquote.Root

| 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.                      |
| `variant`      | `"subtle"` | `"plain" \| "solid" \| "subtle"`                                                                                          | The variant of the component.                    |
| `captionProps` | -          | `HTMLStyledProps<"figcaption">`                                                                                           | The props for the `BlockquoteCaption` component. |
| `cite`         | -          | `ReactNode`                                                                                                               | The citation of the blockquote.                  |
| `citeProps`    | -          | `HTMLStyledProps<"cite">`                                                                                                 | The props for the `BlockquoteCite` component.    |
| `citeUrl`      | -          | `string`                                                                                                                  | The URL of the citation of the blockquote.       |
| `contentProps` | -          | `HTMLStyledProps<"blockquote">`                                                                                           | The props for the `BlockquoteContent` component. |
| `icon`         | -          | `ReactNode`                                                                                                               | The icon of the blockquote.                      |
| `justify`      | `"start"`  | `"center" \| "end" \| "start"`                                                                                            | The alignment of the blockquote.                 |
| `withDash`     | `false`    | `boolean`                                                                                                                 | If `true`, the dash will be shown.               |

### Blockquote.Caption

| 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.                |
| `withDash`    | `false` | `boolean`                                                                                                                 | If `true`, the dash will be shown.         |

### Blockquote.Cite

| 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.                |

### Blockquote.Content

| 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.                |
| `citeUrl`     | -       | `string`                                                                                                                  | The URL of the citation of the blockquote. |

### Blockquote.Icon

| 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.                |