Blockquote

Display quote with optional cite

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Life is like an npm install – you never know what you are going to get.– Forrest Gump

Color

Cite

Children

<Blockquote cite="– Forrest Gump">
  Life is like an npm install – you never know what you are going to get.
</Blockquote>

Configure icon

You can use any React node as icon by passing it to icon prop. Note that component does not control icon size and you need to specify it manually on icon component for better fit.

You can use icons from any react icons library, for example, radix icons, feather icons or react-icons:

webpack built 40a9bf3d1a0a0914ed84 in 28259ms– Your poor i3 from 2012 struggling its best

<Blockquote
  cite="– Your poor i3 from 2012 struggling its best"
  icon={<LightningBoltIcon style={{ width: 18, height: 18 }} />}
>
  webpack built caa9bf3d1a0a0914ed84 in 28259ms
</Blockquote>

By default blockquote uses quote icon, to disable it, set icon prop to null:

I have a Sublime Text license on another laptop– Dan Abramov, 2016

<Blockquote cite="– Dan Abramov, 2016" icon={null}>
  I have a Sublime Text license on another laptop
</Blockquote>