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

Cite

Children

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 { IconFlame } from '@tabler/icons-react';

function Demo() {
  return (
    <Blockquote
      cite="– Your poor i3 from 2012 struggling its best"
      icon={<IconFlame size="1.5rem" />}
    >
      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>
  )
}

Go back

Tooltip – @mantine/core

Up next

Code – @mantine/core

Blockquote component props

Name	Type	Description
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

Name	Static selector	Description
root	.mantine-Blockquote-root	Root element
inner	.mantine-Blockquote-inner	Blockquote inner flex container, contains children, icon and cite
body	.mantine-Blockquote-body	Contains blockquote content
icon	.mantine-Blockquote-icon	Icon wrapper
cite	.mantine-Blockquote-cite	Cite element

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter