Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

Blockquote

Used to quote text content from an external source

SourceStorybookRecipe
AI TipWant to skip the docs? Use the MCP Server
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.

Usage

import { Blockquote } from "@chakra-ui/react"
<Blockquote.Root>
  <Blockquote.Content cite="https://" />
  <Blockquote.Caption>
    <cite>Uzumaki Naruto</cite>
  </Blockquote.Caption>
</Blockquote.Root>
info
If you prefer a closed component composition, check out the snippet below.

Examples

With Cite

To provide reference about the blockquote:

  • pass the cite prop to Blockquote.Content pointing to the quote url
  • render the Blockquote.Caption component to display name of quote author
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

Colors

Use the colorPalette prop to change the color of the blockquote.

gray

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

red

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

green

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

blue

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

teal

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

pink

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

purple

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

cyan

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

orange

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

yellow

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

Variants

Use the variant prop to change the visual style of the blockquote.

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.

Icon

Here's an example of how to compose the Float and BlockquoteIcon to show an icon on the blockquote. The default icon is a double quote.

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

Alternatively, you can render a custom icon.

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

Justify

Use the justify prop to change the alignment of the blockquote.

start

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

center

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

end

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

With Avatar

Here's an example of how to compose the Blockquote, Avatar and Float components to create a stunning testimonial component.

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
EJ
Emily Jones

Closed Component

Here's an example of how to create a closed component composition

import { Blockquote as ChakraBlockquote } from "@chakra-ui/react"
import * as React from "react"

export interface BlockquoteProps extends ChakraBlockquote.RootProps {
  cite?: React.ReactNode
  citeUrl?: string
  icon?: React.ReactNode
  showDash?: boolean
}

export const Blockquote = React.forwardRef<HTMLDivElement, BlockquoteProps>(
  function Blockquote(props, ref) {
    const { children, cite, citeUrl, showDash, icon, ...rest } = props

    return (
      <ChakraBlockquote.Root ref={ref} {...rest}>
        {icon}
        <ChakraBlockquote.Content cite={citeUrl}>
          {children}
        </ChakraBlockquote.Content>
        {cite && (
          <ChakraBlockquote.Caption>
            {showDash ? <>&mdash;</> : null} <cite>{cite}</cite>
          </ChakraBlockquote.Caption>
        )}
      </ChakraBlockquote.Root>
    )
  },
)

export const BlockquoteIcon = ChakraBlockquote.Icon

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add blockquote

Props

Root

PropDefaultType
colorPalette gray
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

justify start
'start' | 'center' | 'end'

The justify of the component

variant subtle
'subtle' | 'solid' | 'plain'

The variant of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

Explorer

Explore the Blockquote component parts interactively. Click on parts in the sidebar to highlight them in the preview.

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Marcus Aurelius

Component Anatomy

Hover to highlight, click to select parts

root

icon

content

caption

blockquote.recipe.ts

Previous

Wrap

Next

Code