Blockquote

A quotation block with a rule on its inline-start edge and secondary text color. Use to highlight quoted content, testimonials, or excerpts. The rule and padding are logical, so they move to the right edge in right-to-left locales.

Installation

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

Requires React 19+, base CSS and a Theme provider. See Setup.

Blockquote

Prop	Type	Description
children *	ReactNode	Content of the blockquote.
cite	ReactNode	Optional attribution for the quote. Rendered in a <cite> element after the quoted content.
xstyle	StyleXStyles	StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.

Usage guidance

Use for quoted text, testimonials, or highlighted excerpts from external sources.
Provide a cite prop when the source of the quote is known.
Pass the source through cite rather than typing it into children, so it renders as a semantic <cite> element that assistive technology can distinguish from the quotation.
Avoid: Use for callout boxes or informational notes; use Banner for those.
Avoid: Wrap the attribution in your own <footer>. A <footer> inside a <blockquote> becomes a contentinfo document landmark, and a page with several quotes then reports several page footers.

Theming API

{
  "targets": [
    {
      "className": "astryx-blockquote",
      "visualProps": []
    }
  ]
}

Anatomy

Rule: The border on the inline-start edge, drawn with --color-border-emphasized.
Quotation: The quoted content, passed as children. Renders inside the <blockquote> element.
Attribution: The source, passed as cite. Renders as a <cite> element below the quotation.

Examples

Blockquote — Showcase: Blockquote with and without citation. A quick visual reference for the blockquote component.
Blockquote — Testimonials: Multiple quotes arranged in a card grid for a testimonials section. Combine with Card and Grid to create social-proof layouts.
Blockquote — With Attribution: A plain quote and a quote with a cite attribution. Use cite to credit the original author or source.