Math

KaTeX math, inline and display, loaded on first use. The source holds the space while it loads or streams.

Markdown

On this page

Inline and display KaTeX, with copy LaTeX.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/math.json

Usage

tsx

import { MathFormula } from "@/components/ui/chatcn/math"

<MathFormula tex="\sqrt{d_k}" />
<MathFormula display tex="\frac{QK^{\top}}{\sqrt{d_k}}" />

KaTeX's stylesheet is added from jsDelivr, pinned to your KaTeX version, the first time math renders, unless the page already has it. To self-host, import katex/dist/katex.min.css and call configureMath({ stylesheet: false }).

Examples

Streaming and errors

A formula streaming in, and invalid TeX falling back to its source.

Props

Prop	Type	Notes
`tex`	`string`	TeX without delimiters
`display`	`boolean`	Centered block math
`streaming`	`boolean`	Shows the source until the formula is complete
`copyable`	`boolean`	Copy LaTeX on display math. On by default

Accessibility

KaTeX renders MathML next to the visual output, so screen readers read the formula.
Invalid TeX shows its source with a message instead of red error text in the formula.