sqlSELECT name, active_seats, active_seats_12w_ago
FROM usage
WHERE active_seats <= active_seats_12w_ago * 0.6
ORDER BY active_seats * 1.0 / active_seats_12w_ago
LIMIT 3;

"use client";

import { enableCodeHighlighting } from "@/siteplane/components/code/code-highlight";
import { Typeset, typesetComponents } from "@/siteplane/components/typeset";

// The fence names a language. Highlighting is optional; an app turns it on
// once, before the first Code Block renders.
enableCodeHighlighting();

// The parts a markdown renderer takes from the map, written out here by hand.
const {
  a: A,
  code: InlineCode,
  h3: H3,
  li: Li,
  p: P,
  pre: Pre,
  strong: Strong,
  table: Table,
  tbody: Tbody,
  td: Td,
  th: Th,
  thead: Thead,
  tr: Tr,
  ul: Ul,
} = typesetComponents;

const query = `SELECT name, active_seats, active_seats_12w_ago
FROM usage
WHERE active_seats <= active_seats_12w_ago * 0.6
ORDER BY active_seats * 1.0 / active_seats_12w_ago
LIMIT 3;
`;

const accounts = [
  ["Halden Logistics", "17", "41", "−59%"],
  ["Brightwave Studio", "8", "18", "−56%"],
  ["Ortega Foods", "14", "26", "−46%"],
] as const;

// A renderer passes the alignment of a table column as a style.
const end = { textAlign: "right" } as const;

export default function Example() {
  return (
    <Typeset className="w-full max-w-md">
      <H3>Three accounts are likely to churn</H3>
      <P>
        Active seats fell by <Strong>40% or more</Strong> over the last 12 weeks
        at three accounts on the <InlineCode>Growth</InlineCode> and{" "}
        <InlineCode>Scale</InlineCode> plans. The{" "}
        <A href="#usage-report">usage report for week 43</A> has the full list.
      </P>
      <Ul>
        <Li>
          <Strong>Halden Logistics</Strong> has open questions about its
          renewal.
        </Li>
        <Li>Brightwave Studio stopped inviting new people in September.</Li>
        <Li>Ortega Foods moved its team to a smaller plan.</Li>
      </Ul>
      <P>This is the query behind the list:</P>
      <Pre>
        <code className="language-sql">{query}</code>
      </Pre>
      <Table>
        <Thead>
          <Tr>
            <Th>Account</Th>
            <Th style={end}>Seats now</Th>
            <Th style={end}>12 weeks ago</Th>
            <Th style={end}>Change</Th>
          </Tr>
        </Thead>
        <Tbody>
          {accounts.map(([account, now, before, change]) => (
            <Tr key={account}>
              <Td>{account}</Td>
              <Td style={end}>{now}</Td>
              <Td style={end}>{before}</Td>
              <Td style={end}>{change}</Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
      <P>I can draft a check-in email for each of them.</P>
    </Typeset>
  );
}

Installation

pnpm dlx shadcn@4.18.0 add @siteplane/typeset

For this page’s examples, also install:

pnpm dlx shadcn@4.18.0 add @siteplane/code-highlight

Code is installed with Typeset. code-highlight highlights the code fences; without it, a fence shows plain text. See Code.

Usage

import {
  Typeset,
  TypesetHeading,
  TypesetParagraph,
} from "@/siteplane/components/typeset";

<Typeset>
  <TypesetHeading level={3}>Three accounts are likely to churn</TypesetHeading>
  <TypesetParagraph>
    Active seats fell by 40% or more in 12 weeks.
  </TypesetParagraph>
</Typeset>;

Composition

Typeset
├── TypesetHeading
├── TypesetParagraph
│   ├── TypesetStrong
│   ├── TypesetLink
│   └── Code
├── TypesetList
│   └── TypesetListItem
├── TypesetQuote
├── TypesetRule
├── TypesetCodeBlock
└── a table, from typesetComponents

Typeset sets the kit’s body type and stacks its blocks with a gap. With a markdown renderer you do not write the parts yourself: typesetComponents maps each element the renderer passes to its part. Inline code is the kit’s Code, a fence is a Code Block with the fence’s language, and a table is a Native Table, the plain HTML table in the look of Table, without hover, since nothing in written text acts. A long value in the text wraps wherever it has to, so it never makes the thread wider. A table scrolls sideways when it is wider than the text, and its cells wrap between words only.

Markdown renderers

The kit has no markdown renderer. Pass typesetComponents to the components prop of your renderer and put its output in a Typeset. The examples on this page write out by hand the elements that a renderer passes to the map.

react-markdown

react-markdown renders its elements without a container, so they are the blocks of the Typeset. Tables need the remark-gfm plugin.

import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { Typeset, typesetComponents } from "@/siteplane/components/typeset";

export function Answer({ text }: { text: string }) {
  return (
    <Typeset>
      <Markdown components={typesetComponents} remarkPlugins={[remarkGfm]}>
        {text}
      </Markdown>
    </Typeset>
  );
}

Streamdown

Streamdown renders markdown that is still arriving, and puts its blocks in a container of its own, which spaces them with a margin. Give that container className="contents space-y-0": contents makes the blocks the Typeset’s own, so its flow spaces them, and space-y-0 removes the margin.

A fence whose closing line has not arrived yet keeps its copy action disabled. Read that with Streamdown’s useIsCodeFenceIncomplete and pass it to TypesetCodeBlock as streaming.

import type { ComponentProps } from "react";
import { Streamdown, useIsCodeFenceIncomplete } from "streamdown";
import {
  Typeset,
  TypesetCodeBlock,
  typesetComponents,
} from "@/siteplane/components/typeset";

// The renderer's node is not an attribute of the DOM element.
function Fence({
  node: _node,
  ...props
}: ComponentProps<"pre"> & { node?: unknown }) {
  return <TypesetCodeBlock {...props} streaming={useIsCodeFenceIncomplete()} />;
}

const components = { ...typesetComponents, pre: Fence };

export function StreamingAnswer({
  streaming,
  text,
}: {
  streaming: boolean;
  text: string;
}) {
  return (
    <Typeset>
      <Streamdown
        className="contents space-y-0"
        components={components}
        isAnimating={streaming}
      >
        {text}
      </Streamdown>
    </Typeset>
  );
}

Densities

density="chat", the default, is the kit’s body type for an answer in a thread: 14 px text on a 21 px line, with 14 px between blocks. density="document" is a size up for an article or an answer read on its own: 16 px text on a 27 px line, with 24 px between blocks. Headings step up from the body size in both.

"use client";

import { Typeset, typesetComponents } from "@/siteplane/components/typeset";

// The parts a markdown renderer takes from the map, written out here by hand.
const {
  blockquote: Quote,
  code: InlineCode,
  h1: H1,
  h2: H2,
  hr: Rule,
  li: Li,
  ol: Ol,
  p: P,
  ul: Ul,
} = typesetComponents;

export default function Example() {
  return (
    <Typeset className="w-full max-w-md" density="document">
      <H1>Churn review, week 43</H1>
      <P>
        Three accounts lost more than 40% of their active seats in 12 weeks.
        This review lists what we know and who reaches out first.
      </P>
      <H2>What changed</H2>
      <Ul>
        <Li>
          Seats fell fastest on the <InlineCode>Growth</InlineCode> plan:
          <Ul>
            <Li>Halden Logistics from 41 to 17 seats</Li>
            <Li>Brightwave Studio from 18 to 8 seats</Li>
          </Ul>
        </Li>
        <Li>Ortega Foods kept its plan but moved half of its team out.</Li>
      </Ul>
      <Quote>
        <P>
          We were told the reorganization would pause hiring, so we stopped
          adding seats.
        </P>
        <P>A support conversation with Halden Logistics, 12 October.</P>
      </Quote>
      <Rule />
      <H2>Who reaches out first</H2>
      <Ol>
        <Li>
          Halden Logistics, by the account owner, before the renewal call.
        </Li>
        <Li>Brightwave Studio, with the usage report attached.</Li>
        <Li>Ortega Foods, once the support thread is answered.</Li>
      </Ol>
    </Typeset>
  );
}

Tuning

Three custom properties tune a Typeset, and a density sets all three: --sp-typeset-size is the size of the text, --sp-typeset-leading its line height and --sp-typeset-flow the space between blocks. Headings and the flow follow the size, so a new size alone keeps the proportions of the density. Set them with a utility class or a style on the Typeset; either wins over the density. Give the flow as a length, such as a token or a multiple of the size, not in em, which would grow with the text of a heading.

<Typeset className="[--sp-typeset-leading:var(--sp-rw-line-24)] [--sp-typeset-size:var(--sp-rw-font-16)]">
  {answer}
</Typeset>

Streaming

A reply that streams adds blocks at the end and grows its last block. Typeset spaces its blocks with a gap, and none of its rules looks at the blocks after an element, so a block that arrives never restyles the ones before it. In a fence that streams, the lines that are complete keep their highlighting while the last line grows.

AI SDK

A text part is markdown. Render it in a Typeset with the map, and tell Streamdown that the part is still arriving while its state is streaming. As with the steps on the Trace page, only the last message streams, and only while the chat’s status is streaming, so a part that stopped with the reply does not stay animated. In an assistant turn, the Typeset sits in a ghost Bubble, which gives the answer no surface of its own.

import type { UIMessage } from "ai";

export function AnswerText({
  live,
  message,
}: {
  live: boolean;
  message: UIMessage;
}) {
  return message.parts.map((part, index) =>
    part.type === "text" ? (
      <StreamingAnswer
        key={index}
        streaming={live && part.state === "streaming"}
        text={part.text}
      />
    ) : null,
  );
}

API reference

Typeset renders a div that stacks its blocks with the flow as a gap. Each part renders its element (TypesetParagraph a p, TypesetListItem an li, TypesetQuote a blockquote, TypesetStrong a strong) and takes its props and string className. TypesetLink is the kit’s inline link Button rendered as an a, underlined in the text color, and takes the attributes of an anchor. TypesetRule is the kit’s Separator. TypesetCodeBlock reads the code element a renderer puts in a pre: its language-x class becomes the Code Block’s language and title, and its text the value, which the Code Block copies. The table parts take no inline style from the renderer: a column’s alignment becomes the cell’s alignment, and the rest is dropped. The parts of the map drop the node prop a renderer passes. TypesetDensity, TypesetProps, TypesetHeadingLevel, TypesetHeadingProps, TypesetListProps and TypesetCodeBlockProps are exported.

Read the installed source.

Usage notes

Typeset styles what the renderer gives it. Which markdown and HTML the renderer allows, and how it treats links and images, is the renderer’s. Elements the map leaves out, such as images, emphasis and strikethrough, render as the renderer renders them, in the type of the Typeset.

Typeset is for written text. The labels and text of an interface, such as a form or a card, take the type of their own components.