2026 年 7 月 - shadcn/typeset の紹介

本日、shadcn/typeset をリリースします。これは、HTML とレンダリングされたマークダウンのスタイル システムを 1 つの CSS ファイルでまとめたものです。

アプリは、見出し、段落、リスト、表、コードなど、あらゆる場所で同じ HTML 要素をレンダリングします。ブログ用にスタイルを設定し、次にドキュメント用にスタイルを設定し、次にチャット用にスタイルを設定します。 Typeset を使用すると、一度スタイルを設定すれば、各コンテキストに合わせてリズムを調整できます。

コピー<div className="typeset">{content}</div>

クラスを 1 つ追加すると、内部のすべてがスタイル設定されます。Typeset はコンテナのサイズに追従し、テーマを尊重した上で、サイズ・行送り・フローという 3 つのコントロールを提供します。

必要なだけタイプセットを作成できます。チャットにはタイトなリズムを使用し、ドキュメントにはゆったりとしたリズムを使用します。

コピー.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}</article>

また、ストリーミング用に設計されているため、新しいブロックが以前のブロックのスタイルを変更することはありません。ファイルはプロジェクト内に存在します。回避策となるパッケージや構成レイヤーはありません。

タイプセット ビルダー を開いてタイプセットを作成するか、完全なガイドについては タイプセット ドキュメント をお読みください。