Typography

Quotations and citations

Wrap testimonials and excerpts with a bordered emphasis rail and optional attribution rendered as cite inside a footer.

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variants showcase

Tone tokens align with dark shells across Zentauri previews—swap surfaces thoughtfully.

Short quotation sample.
default

Short quotation sample.
muted

Short quotation sample.
primary

Short quotation sample.
secondary

Short quotation sample.
accent

Short quotation sample.
destructive

Short quotation sample.
info

Short quotation sample.
success

Short quotation sample.
warning

Short quotation sample.
error

Short quotation sample.
gradient-pink-violet

Short quotation sample.
gradient-cyan-violet

Short quotation sample.
gradient-cyan-blue

Short quotation sample.
gradient-cyan-green

Short quotation sample.
gradient-cyan-orange

Short quotation sample.
gradient-cyan-red

Short quotation sample.
gradient-cyan-purple

Short quotation sample.
gradient-cyan-pink

Formatting showcase

Boolean emphasis props layer Tailwind utilities consistently.

Bold + italic + underline

Highlight + muted + strike

Combination examples

Patterns you can paste into marketing pages and dashboards.

Accent quotation blocks draw attention without breaking rhythm.
Release notes · April 2026

Typography variants examples

Density mirrors other previews: each row pairs live output with the matching import and JSX. Use Show output / Show code on every row; snippets start with Variant naming the token row.

Variant: BLOCKQUOTE · TONE · DEFAULT

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · MUTED

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · PRIMARY

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · SECONDARY

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · ACCENT

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · DESTRUCTIVE

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · INFO

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · SUCCESS

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · WARNING

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · ERROR

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · GRADIENT-PINK-VIOLET

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · GRADIENT-CYAN-VIOLET

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · GRADIENT-CYAN-BLUE

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · GRADIENT-CYAN-GREEN

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · GRADIENT-CYAN-ORANGE

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · GRADIENT-CYAN-RED

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · GRADIENT-CYAN-PURPLE

Composable primitives beat monolithic widgets.
Design Systems Weekly

Variant: BLOCKQUOTE · TONE · GRADIENT-CYAN-PINK

Composable primitives beat monolithic widgets.
Design Systems Weekly

What it does

Adds border-accent blockquote styling with muted footer attribution.

Children are grouped with relaxed spacing.

Composition and API

Tone adjusts text color consistently with other typography primitives.

Prefer short excerpts over entire articles.

Common use cases

Docs quoting specifications.
Marketing quotes with author lines.
Changelog callouts referencing sources.
Support macros referencing policies.

Accessibility

Blockquote communicates quotation semantics.

Pair attribution with readable contrast.

Next.js integration notes

Quotes can render statically from MDX or CMS payloads.

Validate escaping when piping HTML strings.

FAQ

Does attribution support URLs?

Pass readable attribution text; link out via children if you need anchors alongside the quote.

Can I embed headings inside quotes?

Children accept arbitrary rich content; mind heading order relative to the surrounding page.

Is cite separate from HTML cite URLs?

Attribution renders a cite element with display text; native cite URL attributes remain available via props if needed.