A large, centred editorial quote — no accent bar, no attribution, distinct from Blockquote. Rides the existing heading/* type scale; an optional decorative open-quote mark.
primitiv add pull-quote installs it whichever mode you are reading.Preview
The best interface is the one you never have to think about.
import { PullQuote } from "@/components/ui/pull-quote";
<PullQuote size="md" marks> The best interface is the one you never have to think about.</PullQuote>Density is set by a data-density ancestor — the Context system, not a PullQuote prop.
npx primitiv add pull-quotepnpm dlx primitiv add pull-quoteyarn dlx primitiv add pull-quotebunx primitiv add pull-quoteImport
import { PullQuote } from "@/components/ui/pull-quote";No headless primitive — this one ships only as a copied styled surface, so primitiv add is the only way in, whichever mode you are reading.
Extends HTMLQuoteElement — every native attribute of that element is accepted and forwarded.
| Prop | Type | Default | Description |
|---|---|---|---|
| marks | boolean | false | Show the decorative open-quote mark above the text. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | md | Quote size, mapped to the heading/* scale (xs→h5 ... xl→h1); data-density scales each size further. |
--primitiv-pull-quote-font-family--primitiv-pull-quote-font-size--primitiv-pull-quote-line-height--primitiv-pull-quote-font-weight--primitiv-pull-quote-color--primitiv-pull-quote-mark-color--primitiv-pull-quote-mark-gap--primitiv-pull-quote-mark-heightclassName: .primitiv-pull-quote
| Attribute | Value | When |
|---|---|---|
data-marks | "" | marks is true |
<blockquote>, so the passage is announced as a quotation even though it reads visually as a heading-scale statement.marks glyph is decorative and aria-hidden, so it is skipped by assistive tech — the quote is read once, without a stray quotation mark spelled out.Blockquote when the quote is cited — PullQuote carries no attribution by design, so an unattributed editorial lift is its whole job.A large, centred statement lifted out of the flow — the sentence an article is built around. Unlike Blockquote it has no accent bar and no attribution: it is a typographic moment, not a cited passage. size steps it along the heading scale.
The best interface is the one you never have to think about.
import { PullQuote } from "@/components/ui/pull-quote";
<PullQuote size="lg"> The best interface is the one you never have to think about.</PullQuote>marks adds an oversized quotation glyph above the quote — the magazine treatment. It is purely decorative and aria-hidden, so it adds visual weight without changing what a screen reader reads.
The best interface is the one you never have to think about.
import { PullQuote } from "@/components/ui/pull-quote";
<PullQuote marks size="lg"> The best interface is the one you never have to think about.</PullQuote>