v2.5.1
Discord
Source code

Blockquote

Blockquote 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
<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={<FlameIcon size={20} />}
>
  webpack built caa9bf3d1a0a0914ed84 in 28259ms
</Blockquote>

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

webpack built 40a9bf3d1a0a0914ed84 in 28259ms– Your poor i3 from 2012 struggling its best
<Blockquote cite="– Your poor i3 from 2012 struggling its best" icon={null}>
  webpack built 40a9bf3d1a0a0914ed84 in 28259ms
</Blockquote>
Build fully functional accessible web applications with ease
Project
Contribute to MantineChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGithub discussions
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter