Tools

Typeset

Tune the fonts, size, line height, space between blocks and line length for long-form text (Prose, Markdown), check them on real content, then copy the CSS.

Presets in the theme: yugen-prose-docs, -article, -chat, -compact. Prose

Preset

Body

Headings

Code

Size (px)14

Line height (×)1.43

Flow (em)1.15

Measure (ch)72

Installation

Install the package, then import the theme once in your root CSS file. Components read the theme's tokens, so changing the brand changes the whole set.

npm i yugen-ui

Using components

Import from yugen-ui.
Wrap the app in YugenProvider for theme, brand and text direction.
Every component has a clear focus state and works with the keyboard.

Prop	Default
`size`	`"medium"`
`appearance`	`"secondary"`

Output

Class name

.my-prose

CSS

.my-prose {  --prose-size: 0.875rem;  --prose-leading: 1.43;  --prose-flow: 1.15em;}

Share link