shadcn/typeset

Overview

shadcn/typeset is the official shadcn/ui styling system for HTML and rendered markdown, released in July 2026. It is a single typeset.css file that lives in the project and styles everything inside a typeset container: headings, paragraphs, lists, tables and code, from blog posts and docs to streaming chat.

Instead of exposing dozens of variables, Typeset reduces type settings to three controls: size, leading and flow. Heading sizes, list indents and the spacing around every block derive from them. Colors, fonts and radius come from the app's shadcn theme, so dark mode follows the same tokens. The Typeset builder on ui.shadcn.com picks fonts and rhythm, previews them on real content and outputs the CSS file, the font setup for the framework and a preset class.

Features

• One CSS file: typeset.css is copied into the project and imported after Tailwind CSS
• Three controls: --typeset-size, --typeset-leading and --typeset-flow set the whole rhythm
• Font variables: Separate body, heading and mono font variables that default to the app's fonts
• Multiple presets: Keep a tighter preset for chat and a roomier one for docs in the same app
• Fits its container: Follows the surrounding type size and bumps it slightly on small screens
• Streaming-friendly: New blocks don't change the margins or styles of earlier blocks
• Theme-aware: Uses shadcn/ui color, font and radius tokens, including dark mode
• Typeset builder: Pick fonts and rhythm, preview on docs, chat and articles, then copy the output

Tech stack

• CSS, Tailwind CSS v4
• shadcn/ui theme tokens

Getting started

@import "tailwindcss";
@import "./typeset.css";

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