# Prose (/components/typography/prose)



`Prose` adds vertical rhythm and list styling to long-form content. It does not constrain content
width. Pair it with [Heading](/components/typography/heading) and
[Text](/components/typography/text) for visual hierarchy, or map rendered Markdown and CMS elements
to those components.

apps/docs/src/examples/prose/basic.tsx

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

export default () => {
	return (
		<Prose>
			<Heading level={2}>Why structure matters</Heading>
			<Text elementType="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.
			</Text>
			<Heading level={3}>Reading a list</Heading>
			<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>
	);
};
```

## Lists [#lists]

Lists inside `Prose` include markers and indentation, including nested lists.

apps/docs/src/examples/prose/lists.tsx

```tsx
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>
	);
};
```

## Related components [#related-components]

[Heading](/components/typography/heading) and [Text](/components/typography/text) own typography and
visual hierarchy. Use them inside `Prose` when you need styled headings and body text.

## API [#api]

<ComponentPropsTable
  id="type-table-prose.tsx-ProseProps"
  type="{
  &#x22;id&#x22;: &#x22;prose.tsx-ProseProps&#x22;,
  &#x22;name&#x22;: &#x22;ProseProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for `Prose`.&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;deprecated&#x22;: false,
      &#x22;description&#x22;: &#x22;`ProseProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.&#x22;,
      &#x22;name&#x22;: &#x22;__nativePropsForwarding&#x22;,
      &#x22;required&#x22;: true,
      &#x22;simplifiedType&#x22;: &#x22;&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;&#x22;
    }
  ]
}"
/>