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.

webpack built 40a9bf3d1a0a0914ed84 in 28259ms– Your poor i3 from 2012 struggling its best
import { Blockquote } from '@mantine/core';
import { Flame } from 'tabler-icons-react';
function Demo() {
return (
<Blockquote
cite="– Your poor i3 from 2012 struggling its best"
icon={<Flame 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>
)
}