Blockquote

Blockquote with optional cite
Import

Usage

Life is like an npm install – you never know what you are going to get.– Forrest Gump
Color
import { Blockquote } from '@mantine/core';
function Demo() {
return (
<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 will need to specify it manually on icon component for better fit.

Download more icon variants from https://tabler-icons.io/i/flame
webpack built 40a9bf3d1a0a0914ed84 in 28259ms– Your poor i3 from 2012 struggling its best
import { Blockquote } from '@mantine/core';
import { IconFlame } from '@tabler/icons';
function Demo() {
return (
<Blockquote
cite="– Your poor i3 from 2012 struggling its best"
icon={<IconFlame size={24} />}
>
webpack built caa9bf3d1a0a0914ed84 in 28259ms
</Blockquote>
);
}

To remove icon, set icon prop to null:

webpack built 40a9bf3d1a0a0914ed84 in 28259ms– Your poor i3 from 2012 struggling its best
import { Blockquote } from '@mantine/core';
function Demo() {
return (
<Blockquote cite="– Your poor i3 from 2012 struggling its best" icon={null}>
webpack built 40a9bf3d1a0a0914ed84 in 28259ms
</Blockquote>
)
}
Download more icon variants from https://tabler-icons.io/i/search

Blockquote component props

NameTypeDescription
cite
ReactNode
Describe a reference to a cited quote
color
MantineColor
Icon color from theme
icon
ReactNode
Icon, defaults to quote icon

Blockquote component Styles API

NameStatic selectorDescription
root.mantine-Blockquote-rootRoot element
inner.mantine-Blockquote-innerBlockquote inner flex container, contains children, icon and cite
body.mantine-Blockquote-bodyContains blockquote content
icon.mantine-Blockquote-iconIcon wrapper
cite.mantine-Blockquote-citeCite element