Typography Prose React component
Readable styles for rich text from Markdown or a CMS, without a plugin: balanced headings with hover # links, comfortable line length and rhythm, lists, quotes, inline code, code blocks with a Copy button, tables, marks and keys, scoped so they never leak into the rest of the page.
When to use the Typography Prose component
Use Typography Prose for any long-form content you don't hand-style element by element: blog posts, docs, changelogs, legal pages, help articles, CMS bodies.
Only pass trusted or sanitised HTML to html.
Installation
Add the Typography Prose component to your project with the shadcn CLI. It lands in components/typography-prose.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/typography-prose.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<TypographyProse /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| children Rich content: your own elements, or use html for a string (from Markdown or a CMS). | React.ReactNode | — |
| html | string | — |
| size | "sm" | "base" | "lg" | "base" |
| measure Line length cap, e.g. "68ch". | string | "68ch" |
| anchors Give h2 / h3 ids and a # link that appears on hover. | boolean | true |
| copyCode Put a Copy button on code blocks. | boolean | true |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- children
Rich content: your own elements, or use html for a string (from Markdown or a CMS).
React.ReactNode - htmlstring
- size"sm" | "base" | "lg"Default: "base"
- measure
Line length cap, e.g. "68ch".
stringDefault: "68ch" - anchors
Give h2 / h3 ids and a # link that appears on hover.
booleanDefault: true - copyCode
Put a Copy button on code blocks.
booleanDefault: true - theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- Do I need @tailwindcss/typography?
- No. The styles ship with the component as a small scoped stylesheet, so nothing else on the page is affected.
- Where do heading links come from?
- h2 and h3 get an id made from their text (unless they already have one) and a # link that appears on hover, handy for sharing a section.
- Is the html prop safe?
- It renders the string as-is, so sanitise anything that comes from users before passing it in.
