Blockquote

Styled block quotation with an optional citation footer.

Examples

Default

The best way to predict the future is to invent it.

<Blockquote>The best way to predict the future is to invent it.</Blockquote>

With Cite

The best way to predict the future is to invent it.

— Alan Kay

<Blockquote
  cite="— Alan Kay"
>
  The best way to predict the future is to invent it.
</Blockquote>

With React Node Cite

The best way to predict the future is to invent it.

— Alan Kay, Wikipedia

<Blockquote
  cite={( <> — Alan Kay,{' '} <a href="https://en.wikipedia.org/wiki/Alan_Kay">Wikipedia</a> </> )}
>
  The best way to predict the future is to invent it.
</Blockquote>

With Complex Children

The best way to predict the future is to invent it.

This is especially true in the field of computing, where the boundaries of what is possible are constantly being redefined.

— Alan Kay

<Blockquote
  cite="— Alan Kay"
>
  {( <> <p>The best way to predict the future is to invent it.</p> <p> This is especially true in the field of computing, where the boundaries of what is possible are constantly being redefined. </p> </> )}
</Blockquote>

API

Blockquote

Styled block quotation with an optional citation footer.

Prop	Type	Default	Description
children*	ReactNode	—	Quoted content.
cite	ReactNode	—	Citation text rendered in a footer below the quote.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
ref	Ref<HTMLQuoteElement>	—	Ref forwarded to the blockquote element.
style	CSSProperties	—	Inline styles applied to the root element.