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

Typography API

Generated from the package prop types and variant definitions.

Blockquote

BlockquoteProps

Behavior

Prop	Type	Default
attributionAttribution label shown in a footer (distinct from the HTML `cite` URL attribute).	`string \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`(Ref<HTMLQuoteElement> & RefObject<HTMLQuoteElement>) \| undefined`	none
tone	`TypographyTone \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLQuoteElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CodeBlock

CodeBlockProps

Behavior

Prop	Type	Default
languageHint for stacked highlighting stacks / aria-labels.	`string \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`(Ref<HTMLPreElement> & RefObject<HTMLPreElement>) \| undefined`	none
tone	`TypographyTone \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLPreElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Heading

HeadingProps

Variants

Prop	Type	Default
level*	`123456`	none

Behavior

Prop	Type	Default
bold	`boolean \| undefined`	none
displayLevelVisual scale; defaults to `level`.	`HeadingLevel \| undefined`	none
italic	`boolean \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`(Ref<HTMLHeadingElement> & RefObject<HTMLHeadingElement>) \| undefined`	none
strikethrough	`boolean \| undefined`	none
tone	`TypographyTone \| undefined`	none
underline	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLHeadingElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

InlineCode

InlineCodeProps

Behavior

Prop	Type	Default
tone	`TypographyTone \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

List

ListProps

Behavior

Prop	Type	Default
marker	`UnorderedMarker \| undefined`	none
ordered	`boolean \| undefined`	none
tone	`TypographyTone \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLOListElement> \| MouseEventHandler<HTMLUListElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

ListItem

ListItemProps

Behavior

Prop	Type	Default
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`(Ref<HTMLLIElement> & RefObject<HTMLLIElement>) \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLLIElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Text

TextProps

Variants

Prop	Type	Default
size	`baselgsm`	base

Behavior

Prop	Type	Default
as	`TextElement \| undefined`	none
bold	`boolean \| undefined`	none
highlight	`boolean \| undefined`	none
italic	`boolean \| undefined`	none
strikethrough	`boolean \| undefined`	none
tone	`TypographyTone \| undefined`	none
underline	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

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.