Formula

Renders real LaTeX math notation via KaTeX, with graceful fallback rendering for invalid expressions and a MathML tree for screen readers.

Installation

npx dafink-ui add formula

Requires: katex

Demo

x2+y2=r2x^2 + y^2 = r^2
−b±b2−4ac2a\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
∑i=1nxi\sum_{i=1}^{n} x_i

Props

NameTypeDefaultDescription
expressionstring-Required. A LaTeX math expression, e.g. "x^2", "\frac{a}{b}", "\sum_{i=1}^{n} x_i". Rendered with KaTeX.
display"inline" | "block""inline""inline" flows with surrounding text as a <span>. "block" centers the formula on its own line as a <div>.
size"sm" | "md" | "lg""md"Font size of the rendered formula: text-sm, text-base, or text-lg.
classNamestring""Additional Tailwind classes merged onto the root wrapper.

Accessibility

Formula renders fully static output with no interactive elements and no component-specific keyboard behavior at all. KaTeX's output: 'htmlAndMathml' option builds two parallel trees — a visual HTML layout that KaTeX itself marks aria-hidden, and a MathML tree with a full plain-TeX annotation fallback for assistive tech — so accessibility comes entirely from that library-generated markup, with no additional ARIA wiring layered on top.