Components / Typography

Blockquote

Blockquote wraps quoted content in a semantic <blockquote> — a left accent border, italic text, and an optional citation rendered in muted type below the quote.

Loading playground…

What it is

A <Box as="blockquote"> with a left accent border and italic children. Unlike the rest of the typography family, Blockquote does not spread the full Box style-prop set — it takes a small, purpose-built prop pair. The italic default suits most designs; pass fontStyle="normal" through the inner Text if your system prefers upright quoted text.

Install

Blockquote is exported from usemotif. No separate install.

example.tsx

import { Blockquote } from 'usemotif';

API

Blockquote

stable

function Blockquote(props: BlockquoteProps): JSX.Element

childrenReactNode

The quoted content. Rendered in italic text by default.

citeReactNode

Optional citation. Rendered as a `<cite>` below the quote in muted text.

Examples

Quote with a citation:

example.tsx

<Blockquote cite="— motif docs">
Tokens describe the values; theming is how they switch.
</Blockquote>

Quote without a citation:

example.tsx

<Blockquote>
The atom of motif is Box. Everything else composes from it.
</Blockquote>