# July 2026 - Introducing JGuang UI/typeset · JGuang UI

> 本页提供 JGuang UI 技术内容、中文导航与术语适配。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/changelog/2026-07-typeset
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

Today we're releasing **JGuang UI/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.

```tsx
<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:

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

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

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

It's also designed for streaming, so new blocks don't restyle earlier ones. The file lives in your project. There's no package or config layer to work around.

Open the [typeset builder](/typeset) to create yours, or read the [Typeset docs](/systems/jguang-ui/docs/typeset) for the full guide.


  

    

[Build your typeset](/typeset)


  

  

    

[Read the docs](/systems/jguang-ui/docs/typeset)

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt