Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Blockquote

Blockquote is a component that represents a quotation. By default, it renders a blockquote element.

Source@yamada-ui/typography

Import

import {
  Blockquote,
  BlockquoteContent,
  BlockquoteCaption,
  BlockquoteCite,
} from "@yamada-ui/react"
Copied!

Usage

Editable example

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

Change Variant

Editable example

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

Change Color Scheme

Editable example

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

Display Citation

To display the source of the quote, set a ReactNode to cite.

Editable example

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

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

Display Icon

To display an icon, set a ReactNode to icon.

Editable example

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

Change Alignment

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

Editable example

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

Customize

Editable example

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

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

    <BlockquoteCaption alignSelf="end">
      <BlockquoteCite>Wikipedia</BlockquoteCite>
    </BlockquoteCaption>
  </Blockquote>
</VStack>
Copied!

Editable example

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

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

    <BlockquoteCaption>
      <BlockquoteCite color="secondary">Wikipedia</BlockquoteCite>
    </BlockquoteCaption>
  </Blockquote>
</VStack>
Copied!

Edit this page on GitHub

PreviousHeadingNextEm