Blockquote

A quote, marked by a rule in the accent colour. The smallest component in the kit: one border and one padding.

prop	type	default
`as?`	`ElementType`	`"blockquote"`	the element or component to render
`className?`	`string`	`—`	merged over the defaults, so it wins
`…rest`	`props of as`	`—`	typed against the chosen element

Examples

Usage

tsx

<Blockquote>
  Every primitive shares one convention, so learning one teaches you all of them.
</Blockquote>

preview

Every primitive shares one convention, so learning one teaches you all of them.

Details

Typography stays yours

The component sets a left rule in the darker primary and the padding that keeps the text off it. It does not touch the font, the size, the colour or the italics — a quote inherits the typography of wherever it sits, which is what lets the same component look right in an article and in a card.

Quoting properly

It renders a real blockquote, so the semantics are already right and cite is typed. Attribution belongs outside the quote: the accepted markup is a figure with a figcaption, because the person quoted is not part of what they said.

tsx

<figure>
  <Blockquote cite="https://example.com/talk">
    A design system is a shared language, not a folder of components.
  </Blockquote>
  <figcaption>— from the readme</figcaption>
</figure>

Not only for quotes

The same shape reads well as a callout — a note, a warning, a deprecation. Render it as an aside so the markup does not claim it is a quote, and change the rule colour to match the tone.

tsx

<Blockquote as="aside" className="border-medium">
  Deprecated since 1.2. Use Item instead.
</Blockquote>