Typeset · paneui

Release notes

Folders now open with Enter and close with ←. Selection follows focus, so arrow keys move it one row at a time.

Rows keep their height while a folder loads.
Indent guides stay visible in high-contrast mode.

Upgrade the tree before the editor; the editor reads its new events.

Installation

pnpm dlx shadcn@latest add @paneui/typeset

Usage

/* packages/tokens/styles/globals.css, after Tailwind */
@import "./typeset.css";

<article className="typeset typeset-docs">{content}</article>

Examples

Prose in Tabs

Nested Panels

Presets

Use typeset-docs for notes and guides (14px), typeset-reading for articles (16px, set in the serif face) and typeset-chat for messages and streamed answers (14px, tighter flow). Each preset sets --typeset-size, --typeset-leading and --typeset-flow (reading also sets --typeset-font-body), so a one-off works too: className="typeset [--typeset-flow:1.5em]".

Components inside prose

Every library component carries data-slot and is skipped automatically. Wrap anything else in not-typeset. Utilities on an element override the typeset styles without !important.

Prose inside components

A component slot with .typeset or data-typeset styles its own content as prose again, inheriting the surrounding preset; components inside it stay skipped. TabsPanel, AccordionPanel, CollapsiblePanel and CardContent take a typeset prop that sets the attribute (and lets the accordion content keep the prose size and colour). data-typeset="docs", "reading" or "chat" picks a preset where there is no container. Re-enabling works three levels deep.

Streaming

Spacing only flows downward (margin-block-start), so a new block never restyles the ones above it.

Width

Typeset sets no max width; add max-w-reading (68ch) on the container.