Prose
Prose styles long content from Markdown or a CMS: headings, paragraphs, lists, tables, code, quotes and images on the Yugen type ramp.
<Prose> (or add the theme's yugen-prose class). Fonts and rhythm come from the variables --prose-font-body, --prose-font-heading, --prose-font-mono, --prose-size, --prose-leading and --prose-flow; the theme has the presets yugen-prose-docs, yugen-prose-article, yugen-prose-chat and yugen-prose-compact, and the Typeset page (/typeset) builds your own. HTML elements inside are styled without classes. The selectors have zero specificity, so a class on an element always wins; add the not-prose class to anything that should opt out. CodeBlock, Table, Quote and Timeline already carry not-prose. Size large (16px) suits long articles, medium (14px) docs and notes. Prose does not sanitize HTML: content from users must be sanitized first.Getting started with the API
Every request needs an API key in the Authorization header. Create one under Settings › Developer.
- Create a read-only key.
- Store the key in an environment variable, not in source code.
- Try the
/v1/ordersendpoint.
Revoke a leaked key right away. A new key works within a few seconds.
Rate limits
| Plan | Requests / min |
|---|---|
| Free | 60 |
| Pro | 1,200 |
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
// npm install yugen-uiimport { Prose } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Autumn in Kyoto starts in late October, when the maples at Tōfuku-ji turn red.
When to go
- Early morning, before 8 a.m., to beat the crowds.
- On a weekday rather than a weekend.
Article & HTML from a CMS
asChild renders into <article>; sanitized HTML can go in through dangerouslySetInnerHTML.
The list below is a menu, not part of the article:
Opting out with not-prose
An element with the not-prose class (and everything inside it) keeps its own styles.
Usage
- Limit the line length (max-w-prose, about 65 characters) for long content.
- Sanitize HTML from a CMS or from users before rendering it.
- Use not-prose for interface parts in the middle of content (buttons, menus, forms).
- Don't wrap a whole app screen in Prose; wrap only the content.
- Don't use Prose to style a short piece of text. Use Text.
Props
| Prop · Type | Default | Description |
|---|---|---|
| size"medium" | "large" | Default: "medium" | Base text size: body1 (14px) or body2 (16px). |
| asChildboolean | Default: false | Renders into its only child (for example <article>). |