shadcn/typeset: one CSS file for all HTML typography

A complete typography system for HTML, from blog posts to streaming chat. One CSS file you own.

Today we're releasing shadcn/typeset: a styling system for HTML and rendered markdown, in one CSS file.

Your app renders the same HTML elements everywhere: headings, paragraphs, lists, tables, and code. You style them for your blog, then your docs, and now chat. Typeset lets you style them once, then tune the rhythm for each context.

<div className="typeset">{content}</div>

Add one class and everything inside gets styled. Typeset follows the size of its container, uses your theme, and gives you three controls: size, leading, and flow.

You can create as many typesets as you need. Use a tighter rhythm for chat and a roomier one for docs:

.typeset-chat {
  --typeset-leading: 1.6;
  --typeset-flow: 1em;
}

.typeset-docs {
  --typeset-size: 15px;
  --typeset-leading: 1.75;
  --typeset-flow: 1.5em;
}

<div className="typeset typeset-chat">{message}</div>
<article className="typeset typeset-docs">{page}