Typography

Prose

Type, spacing, and element styles for long-form HTML content.

Prose styles long-form content written as plain HTML, such as rendered Markdown or CMS output. Write headings, paragraphs, lists, code blocks, and tables as native elements. Headings and paragraphs get the same type styles as Heading and Text. Prose spaces the blocks and does not set a content width.

Prose: Basic

Open in playground

Why structure matters

Headings break a page into sections a reader can scan, paragraphs group related sentences, and lists set out steps or options one at a time.

Reading a list

Scan the heading to see what the section covers.
Read the paragraph for context.
Follow the list for the details.

import { Prose } from '@luke-ui/react/prose';

export default () => {
	return (
		<Prose>
			<h2>Why structure matters</h2>
			<p>
				Headings break a page into sections a reader can scan, paragraphs group related sentences,
				and lists set out steps or options one at a time.
			</p>
			<h3>Reading a list</h3>
			<ol>
				<li>Scan the heading to see what the section covers.</li>
				<li>Read the paragraph for context.</li>
				<li>Follow the list for the details.</li>
			</ol>
		</Prose>
	);
};

Prose: Basic

Loading Prose: Basic example

Native elements

Native links, inline code, keyboard input, and blockquotes use the default visual treatments of Link, Code, Kbd, and Blockquote. Links use the browser's hover, pressed, and keyboard focus states. Inline code wraps, including long unbroken tokens. Code inside pre keeps its whitespace and scrolls with the block.

Use the dedicated components or their recipes when you need their props or variants. They keep their own appearance inside Prose.

Prose: Native elements

Open in playground

Links point to related content, such as the Link guide. Inline code marks names like className, and keyboard input uses labels such as Enter.

A blockquote separates quoted text from the surrounding paragraphs.

import { Prose } from '@luke-ui/react/prose';

export default () => {
	return (
		<Prose>
			<p>
				Links point to related content, such as the{' '}
				<a href="/components/actions/link">Link guide</a>. Inline code marks names like{' '}
				<code>className</code>, and keyboard input uses labels such as <kbd>Enter</kbd>.
			</p>
			<blockquote>
				<p>A blockquote separates quoted text from the surrounding paragraphs.</p>
			</blockquote>
		</Prose>
	);
};

Prose: Native elements

Loading Prose: Native elements example

Heading and Text

Use Heading or Text for an element that needs a prop, such as a different type style or colour. They keep their own props inside Prose, and Prose still spaces them.

Prose: Heading and Text

Open in playground

Choosing a type style

A lead paragraph uses Text to step up from the body style.

The paragraphs after it stay plain and use the body style.

import { Prose } from '@luke-ui/react/prose';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Prose>
			<h2>Choosing a type style</h2>
			<Text elementType="p" typography="lead">
				A lead paragraph uses Text to step up from the body style.
			</Text>
			<p>The paragraphs after it stay plain and use the body style.</p>
		</Prose>
	);
};

Prose: Heading and Text

Loading Prose: Heading and Text example

Lists

Lists get markers and indentation at every nesting level. Untyped ordered lists use decimal markers. A typed list, such as <ol type="a">, keeps its HTML markers, except in Chromium under a reset that removes list markers, such as Tailwind Preflight.

Prose: Lists

Open in playground

An ordered list numbers each item, so the order carries meaning.
An item can hold a nested list of its own.
- A nested list is indented from its parent item.
- An unordered list marks items with bullets instead of numbers.
Spacing between items stays even at every level.

import { Prose } from '@luke-ui/react/prose';

export default () => {
	return (
		<Prose>
			<ol>
				<li>An ordered list numbers each item, so the order carries meaning.</li>
				<li>
					An item can hold a nested list of its own.
					<ul>
						<li>A nested list is indented from its parent item.</li>
						<li>An unordered list marks items with bullets instead of numbers.</li>
					</ul>
				</li>
				<li>Spacing between items stays even at every level.</li>
			</ol>
		</Prose>
	);
};

Prose: Lists

Loading Prose: Lists example

Wide content

Images and videos shrink to fit the content width. A code block or table wider than the content scrolls sideways inside its own box. A table that fits takes the width of its content.

When you control the markup, set tabIndex={0} on a pre or table so someone using a keyboard can scroll it in every browser.

Prose: Wide content

Open in playground

Import each component from its own entry point.

import { Prose } from '@luke-ui/react/prose';

Entry point	Exports
`@luke-ui/react/heading`	`Heading`, `HeadingProps`
`@luke-ui/react/prose`	`Prose`, `ProseProps`

import { Box } from '@luke-ui/react/box';
import { Code } from '@luke-ui/react/code';
import { Prose } from '@luke-ui/react/prose';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Box
			borderColor="decorative"
			borderRadius="detail"
			borderStyle="solid"
			borderWidth="thin"
			padding="space.12"
			style={{ maxInlineSize: '18rem' }}
		>
			<Prose>
				<Text elementType="p">Import each component from its own entry point.</Text>
				<pre tabIndex={0}>
					<code>{`import { Prose } from '@luke-ui/react/prose';`}</code>
				</pre>
				<table tabIndex={0}>
					<thead>
						<tr>
							<th scope="col">Entry point</th>
							<th scope="col">Exports</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<Code>@luke-ui/react/heading</Code>
							</td>
							<td>
								<Code>Heading</Code>, <Code>HeadingProps</Code>
							</td>
						</tr>
						<tr>
							<td>
								<Code>@luke-ui/react/prose</Code>
							</td>
							<td>
								<Code>Prose</Code>, <Code>ProseProps</Code>
							</td>
						</tr>
					</tbody>
				</table>
			</Prose>
		</Box>
	);
};

Prose: Wide content

Loading Prose: Wide content example

Opting out

Add the not-prose class to an element to keep Prose styles off it and everything inside it. Use it for an interactive widget or a component that sets its own layout. A Prose nested inside that element applies again.

<Prose>
	<p>Spaced like the rest of the content.</p>
	<div className="not-prose">
		<p>No Prose margins here.</p>
	</div>
</Prose>

The element still keeps the gap that Prose puts after a heading or rule.

Browser support

Prose uses CSS @scope, which needs Chrome 118, Safari 17.4, or Firefox 146. Older browsers show the content without Prose styles.

API

ProseProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type