TypographyBrick 0.1.12

Prose

Prose applies coherent descendant typography, rhythm, and readable measure to trusted React content.

Live example

Built from the published package

Interactive

Release notes

Build dependable interfaces with exact package guidance.

Published components
Closed Agent Knowledge coverage

Choose with confidence

Know when Prose is the right part

Use it when

Use Prose after an application, CMS adapter, or Markdown renderer has produced trusted React children. Use Text or a direct Brick component for smaller or more structured interface copy.

Choose another path when

Do not use Prose to parse or sanitize content, inject HTML strings, style a control layout, or replace the direct component that owns richer anatomy.

Installation and imports

tsx

import { Prose } from "@flowstack-ui/brick/prose";
import "@flowstack-ui/brick/styles.css";

For modular CSS:

tsx

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

Prose and its public types are also exported from @flowstack-ui/brick.

Quick start

tsx

<Prose as="article">
  <h1>Release notes</h1>
  <p>Build dependable interfaces with exact package guidance.</p>
</Prose>

Visual recipes and states

Prose styles native headings, paragraphs, links, lists, quotes, citations, tables, inline code, preformatted code, rules, media, figures, captions, strong/emphasis, mark, and keyboard notation. Direct Brick components retain their own stronger class contracts when composed inside Prose.

Examples

tsx

<Prose as="section" measure="wide" size="lg">
  <h2>Architecture notes</h2>
  <p>Keep parsing and content trust in the application.</p>
</Prose>

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
`as`	`div`, `article`, `section`	`div`
`size`	`sm`, `md`, `lg`	`md`
`measure`	`narrow`, `default`, `wide`, `none`	`default`
`slot`	string data-slot override	`prose`
`children`	trusted React nodes	—

Native attributes, class, style, data slot, and an HTMLElement ref pass through. Prose never accepts an HTML string, parses Markdown, injects markup, fetches content, or sanitizes content.

Public exports are Prose, ProseProps, ProseElement, ProseSize, and ProseMeasure.

Shared responsibility

Accessibility

React children are the boundary. If an application starts with untrusted HTML, it must sanitize and parse that content before rendering it. The application also owns heading hierarchy, link destinations, alternative text, table headers, language, and document landmarks. Prose adds no role, focus target, keyboard behavior, or ARIA state.

Responsive behavior

The root never exceeds its selected reading measure. Native tables and preformatted code wrap within the region; use Table or Code Block when content must preserve horizontal scrolling through an accessible dedicated owner. Media scales within the region. Logical spacing, natural height, safe wrapping, text spacing, zoom, RTL, dark appearance, and forced colors remain supported.

Stable visual contract

Styling and tokens

Customization

Choose size and measure first. Use documented --brick-prose-* variables for a deliberate local editorial recipe; use a Theme for reusable brand values. Do not increase selector specificity to override a direct Brick component.

Tokens and CSS hooks

Use .brick-prose, data-slot, data-size, data-measure, and the documented --brick-prose-* variables for measure, rhythm, foregrounds, accent, border, surface, body/heading/code typography, table cells, and media radius. Descendant selectors use :where() so consumer and direct Brick component styles can override them without specificity escalation.

The complete token surface is --brick-prose-measure, --brick-prose-flow-space, --brick-prose-section-space, --brick-prose-foreground, --brick-prose-muted-foreground, --brick-prose-link-foreground, --brick-prose-accent, --brick-prose-border-color, --brick-prose-surface, --brick-prose-body-font-family, --brick-prose-body-font-size, --brick-prose-body-font-weight, --brick-prose-body-line-height, --brick-prose-body-letter-spacing, --brick-prose-heading-font-family, --brick-prose-heading-font-weight, --brick-prose-heading-letter-spacing, --brick-prose-code-font-family, --brick-prose-code-font-size, --brick-prose-code-radius, --brick-prose-media-radius, --brick-prose-table-cell-padding-block, and --brick-prose-table-cell-padding-inline.

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