TypographyBrick 0.1.12

Blockquote

Blockquote composes a semantic extended quotation, optional source URL, and attribution with finished Brick styling.

Live example

Built from the published package

Interactive

A system should make the correct decision easier to repeat.

Pat Lee, Designing Durable Systems

Choose with confidence

Know when Blockquote is the right part

Use it when

Use Blockquote when an extended quotation and optional attribution form one self-contained content unit.

Choose another path when

Use native q inside the surrounding content owner for an inline quotation. Use Card or a product Block when media, ratings, actions, or testimonial layout own the experience.

Installation and imports

tsx

import { Blockquote } from "@flowstack-ui/brick/blockquote";
import "@flowstack-ui/brick/styles.css";

For modular CSS:

tsx

import "@flowstack-ui/brick/styles/core.css";
import "@flowstack-ui/brick/styles/blockquote.css";

Blockquote and every named part are also available from @flowstack-ui/brick.

Quick start

tsx

<Blockquote.Root>
  <Blockquote.Content cite="https://example.com/design-systems">
    A system should make the correct decision easier to repeat.
  </Blockquote.Content>
  <Blockquote.Caption>
    Pat Lee, <Blockquote.Cite>Designing Durable Systems</Blockquote.Cite>
  </Blockquote.Caption>
</Blockquote.Root>

Visual recipes and states

Accent uses a logical quotation rule, surface adds a quiet framed background, and plain keeps only typography. Alignment is logical and works in LTR and RTL. The component is passive and has no interactive state.

Examples

tsx

<Blockquote.Root align="center" variant="surface">
  <Blockquote.Icon />
  <Blockquote.Content>Clarity compounds.</Blockquote.Content>
  <Blockquote.Caption>— Rowan Chen</Blockquote.Caption>
</Blockquote.Root>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Prop	Values	Default
`variant`	`accent`, `surface`, `plain`	`accent`
`align`	`start`, `center`, `end`	`start`
`data-slot`	`string`	`blockquote`
Content `cite`	source URL string	none
Icon children	React content	`“`

Public exports are Blockquote, BlockquoteRoot, BlockquoteIcon, BlockquoteContent, BlockquoteCaption, BlockquoteCite, BlockquoteRootProps, BlockquoteIconProps, BlockquoteContentProps, BlockquoteCaptionProps, BlockquoteCiteProps, BlockquoteVariant, and BlockquoteAlign.

Shared responsibility

Accessibility

Native elements carry quotation and caption semantics. Icon is decorative by default and adds no announcement. Keep Caption outside Content. Use Content's cite for the source URL; use Cite for a referenced work or source title rather than merely a person's name.

Responsive behavior

Blockquote occupies available inline space and wraps its content naturally. Logical padding, border placement, and alignment adapt to writing direction without JavaScript.

Stable visual contract

Styling and tokens

Customization

Choose variant and alignment first. Override documented variables for a deliberate local quotation recipe. Compose Link separately when the source should be an actionable destination.

Tokens and CSS hooks

Use .brick-blockquote, .brick-blockquote__icon, .brick-blockquote__content, .brick-blockquote__caption, .brick-blockquote__cite, data-align, data-variant, and these variables:

--brick-blockquote-background, --brick-blockquote-foreground, --brick-blockquote-muted-foreground, --brick-blockquote-accent, --brick-blockquote-border-color, --brick-blockquote-border-width, --brick-blockquote-radius, --brick-blockquote-padding-block, --brick-blockquote-padding-inline, --brick-blockquote-gap, --brick-blockquote-icon-font-family, --brick-blockquote-icon-size, --brick-blockquote-icon-font-weight, --brick-blockquote-icon-line-height, --brick-blockquote-content-font-family, --brick-blockquote-content-font-size, --brick-blockquote-content-font-weight, --brick-blockquote-content-line-height, --brick-blockquote-content-letter-spacing, --brick-blockquote-caption-font-family, --brick-blockquote-caption-font-size, --brick-blockquote-caption-font-weight, --brick-blockquote-caption-line-height, and --brick-blockquote-caption-letter-spacing.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground