craftbits*

PullQuote

A semantic <blockquote> primitive for editorial pull-quotes. The default editorial variant prefixes the quote with an em-dash and caps the width at 50ch; the inline variant is a single-line italic aside with no decoration. Both variants accept optional inline attribution (cite) and a source URL that wraps the attribution in a link.

Preview
Premature optimization is the root of all evil.
Customize
Variant
editorial
Attribution

Installation

npx shadcn@latest add https://craftbits.dev/r/pull-quote.json

Usage

import { PullQuote } from "@craft-bits/core";
 
<PullQuote cite="Knuth" source="https://en.wikipedia.org/wiki/Donald_Knuth">
  Premature optimization is the root of all evil.
</PullQuote>

Prefer the subpath import when you only want this primitive:

import { PullQuote } from "@craft-bits/core/text/pull-quote";

Variants

The default editorial variant prefixes the quote with an em-dash and caps the width at 50ch:

<PullQuote>The booth stands finished.</PullQuote>

The inline variant drops the em-dash and the max-width — use it as a single-line italic aside inside a paragraph:

<PullQuote variant="inline">a cabinet of seven drawers</PullQuote>

Attach attribution via cite. When source is also provided, the attribution becomes a link to the source:

<PullQuote cite="Knuth" source="https://en.wikipedia.org/wiki/Donald_Knuth">
  Premature optimization is the root of all evil.
</PullQuote>

Props

PropTypeDefaultDescription
variant'editorial' | 'inline''editorial'Visual variant. editorial adds an em-dash prefix and a 50ch max-width.
citeReactNode—Attribution rendered after the quote.
sourcestring—Optional URL. Wraps cite in a link when provided.
classNamestring—Merged onto the root via cn().
childrenReactNode—The quoted text.

All other props are forwarded to the underlying <blockquote> element.

Accessibility

  • Uses semantic <blockquote> with the cite attribute set from the source URL when provided.
  • Source links open in a new tab with rel="noopener noreferrer" and expose a :focus-visible underline.
  • Pure typography — no prefers-reduced-motion fallback required.

Credits

  • Extracted from: AlgoFlashcards (src/lessons/primitives/chrome/PullQuote.tsx). The source was a bare <p> with a hardcoded Instrument_Serif font and a text-foreground/85 colour that bypassed the token system, plus an em-dash pseudo-prefix and no attribution slot. The library version promotes the element to a semantic <blockquote>, consumes cb-* tokens, adds optional cite/source attribution with a focus-visible link, and splits the API into editorial and inline variants.