Pull quote

A large quotation with its attribution.

Use when: To quote a person on a finding the charts have already shown, or to break up a long run of charts. One per section at most.
Avoid when: Restating a number (use big number) or the main fact of a chart (use callout). Never quote without attribution.

Preview

“Solar set the midday wholesale price on most days in 2023. Our plans had assumed that would happen in the 2030s.”

Marit de VriesHead of system operations, Dutch grid operator

import { PullQuote } from "insightcharts";

export function Example() {
  return (
    <PullQuote
      quote="Solar set the midday wholesale price on most days in 2023. Our plans had assumed that would happen in the 2030s."
      attribution="Marit de Vries"
      role="Head of system operations, Dutch grid operator"
    />
  );
}

{
  "type": "pull-quote",
  "quote": "Solar set the midday wholesale price on most days in 2023. Our plans had assumed that would happen in the 2030s.",
  "attribution": "Marit de Vries",
  "role": "Head of system operations, Dutch grid operator"
}

Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.

Composition

Used in

1 molecule and 2 templates use pull quote.

Molecules

Quote with figure

A pull-quote paired with the statistic or small chart that backs it up, side by side and stacking in narrow containers.

Templates

A sequence of full-frame cards (title, stat, chart, quote, closing) that the reader swipes or steps through. Each card states one fact. It has an optional fixed aspect ratio, a keyboard-accessible pager and a stacked layout for print.

Visual essay

A long article read by scrolling. It has a headline, then an ordered list of blocks in a reading column, then a source note. The blocks are prose, figures, charts with a callout, scrolly sequences, pull quotes, stat rows, small multiples and chapter breaks. Exhibits can be wider than the column.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/pull-quote

The CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:

import { PullQuote } from "insightcharts";

Examples

Centered

“Rooftop solar is now the cheapest source of new electricity in our market.”

Luis OrtegaEnergy economist

import { PullQuote } from "insightcharts";

export function Example() {
  return (
    <PullQuote
      align="center"
      quote="Rooftop solar is now the cheapest source of new electricity in our market."
      attribution="Luis Ortega"
      role="Energy economist"
    />
  );
}

{
  "type": "pull-quote",
  "align": "center",
  "quote": "Rooftop solar is now the cheapest source of new electricity in our market.",
  "attribution": "Luis Ortega",
  "role": "Energy economist"
}

Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.

Medium, with source link

“Solar underbid coal in the afternoon power auctions for three years. The coal plants that could not reduce their output quickly enough in those hours were closed because they no longer covered their costs.”

European Electricity Review 2025

import { PullQuote } from "insightcharts";

export function Example() {
  return (
    <PullQuote
      size="md"
      quote="Solar underbid coal in the afternoon power auctions for three years. The coal plants that could not reduce their output quickly enough in those hours were closed because they no longer covered their costs."
      attribution="European Electricity Review 2025"
      cite="https://ember-energy.org"
    />
  );
}

{
  "type": "pull-quote",
  "size": "md",
  "quote": "Solar underbid coal in the afternoon power auctions for three years. The coal plants that could not reduce their output quickly enough in those hours were closed because they no longer covered their costs.",
  "attribution": "European Electricity Review 2025",
  "cite": "https://ember-energy.org"
}

Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.

Props

Prop	Type	Default	Description
quote	string		The words quoted, without quotation marks.
children	ReactNode		JSX alternative to `quote`.
attribution	string		Who said it.
role	string		Their role, or where it was said.
cite	string		Source URL: set as the blockquote `cite` and linked from the attribution.
size	"md" \| "lg"	"lg"	`lg` anchors a section; `md` sits inside a column.
align	"left" \| "center"	"left"	Left-aligned quotes carry a side rule; centred ones do not.