A <blockquote> with a left-stroke accent bar and an optional attribution line. tone picks the bar colour (default | accent); size scales the quote and citation type together.
primitiv add blockquote installs it whichever mode you are reading.Preview
A design system is a product serving products, not a gallery of components.
import { Blockquote } from "@/components/ui/blockquote";
<Blockquote size="md" tone="default"> A design system is a product serving products, not a gallery of components.</Blockquote>Density is set by a data-density ancestor — the Context system, not a Blockquote prop.
npx primitiv add blockquotepnpm dlx primitiv add blockquoteyarn dlx primitiv add blockquotebunx primitiv add blockquoteImport
import { Blockquote } from "@/components/ui/blockquote";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 |
|---|---|---|---|
| cite | ReactNode | — | The attribution line, rendered in a <cite> beneath the quote. Omitted
when not provided.
Narrows the native <blockquote cite> attribute (a source URL) to a
display string — the RFC 0023 sketch's own shape for this component,
mirroring the Omit-narrowing already used elsewhere in the registry
(e.g. NavigationMenu.Item.value over <li value>). |
| tone | "default" | "accent" | default | Accent-bar colour. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | md | Quote + citation size; data-density scales each size further. |
--primitiv-blockquote-border-color--primitiv-blockquote-border-width--primitiv-blockquote-padding-inline--primitiv-blockquote-gap--primitiv-blockquote-quote-color--primitiv-blockquote-citation-color--primitiv-blockquote-font-family--primitiv-blockquote-font-size--primitiv-blockquote-font-weight--primitiv-blockquote-line-height<blockquote>, and cite a real <cite>, so the quotation and its attribution are announced with the right semantics rather than as styled paragraphs.<blockquote> element carries the meaning, so the distinction survives with styles off.tone sets the left accent bar: default for a neutral pulled-out passage, accent when the quote is a highlight you want the eye to land on. Both are a bar plus the quote — no icon, no fill.
A design system is a product serving products, not a gallery of components.
A design system is a product serving products, not a gallery of components.
import { Blockquote } from "@/components/ui/blockquote";
<Blockquote>A design system is a product serving products, not a gallery of components.</Blockquote>
<Blockquote tone="accent">A design system is a product serving products, not a gallery of components.</Blockquote>cite adds an attribution line in a <cite> beneath the quote. It is the narrowed native blockquote cite — pass the author or source as text; omit it for an unattributed passage.
A design system is a product serving products, not a gallery of components.
Jina Anne
import { Blockquote } from "@/components/ui/blockquote";
<Blockquote tone="accent" cite="Jina Anne"> A design system is a product serving products, not a gallery of components.</Blockquote>size scales the quote against the surrounding type — sm for a quote inside a card, lg for a section-leading pull. It is not PullQuote: reach for that when you want a large, centred, marks-decorated statement with no attribution.
A design system is a product serving products, not a gallery of components.
A design system is a product serving products, not a gallery of components.
import { Blockquote } from "@/components/ui/blockquote";
<Blockquote size="sm">A design system is a product serving products, not a gallery of components.</Blockquote><Blockquote size="lg">A design system is a product serving products, not a gallery of components.</Blockquote>