# Math

LaTeX rendering with KaTeX, themed to the surrounding text color. `MathRenderer` is the inline or display equation; `FormulaBlock` wraps one in a card with a title and a symbol legend.

KaTeX is an optional peer dependency. Install it and import its stylesheet once: `npm i katex` and `import "katex/dist/katex.min.css"`. Without it the raw LaTeX is shown.

Group: Science

## Import

```tsx
import { MathRenderer, FormulaBlock } from "@indoku/ui"
import "katex/dist/katex.min.css"
```

## Examples

### Inline

```tsx
function MathInline() {
  return (
    <p>
      The quadratic formula is <MathRenderer latex="x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}" /> for any equation of the form <MathRenderer latex="ax^2 + bx + c = 0" />.
    </p>
  )
}
```

### Display

Centered display style with `display`.

```tsx
function MathDisplay() {
  return <MathRenderer display latex="\int_0^{\infty} e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}" />
}
```

### FormulaBlock

Title, equation and a symbol legend.

```tsx
function FormulaBlockDemo() {
  return (
    <FormulaBlock
      title="Wave speed"
      description="The speed of a wave equals its frequency times its wavelength."
      latex="v = f\lambda"
      variables={[
        { symbol: "v", meaning: "speed (m/s)" },
        { symbol: "f", meaning: "frequency (Hz)" },
        { symbol: "\\lambda", meaning: "wavelength (m)" },
      ]}
    />
  )
}
```

### Fallback

Shown as monospace text while KaTeX loads.

```tsx
function MathFallback() {
  // Until KaTeX has loaded (or when it is missing), the raw LaTeX is shown in monospace.
  return <MathRenderer latex="E = mc^2" />
}
```

## Props

### MathRenderer

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `latex` * | `string` |  |  |
| `display` | `boolean` | `false (inline)` | Centered display style. |
| `katex` | `KatexLike` |  | Your KaTeX instance. Omit to import `katex` on demand. |

### FormulaBlock

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `latex` * | `string` |  |  |
| `title` | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `variables` | `{ symbol: string; meaning: ReactNode }[]` |  | Legend of symbols: `symbol` is LaTeX. |
| `katex` | `KatexLike` |  |  |

`*` = required. Style props and HTML attributes are accepted too.

## Accessibility

- KaTeX output includes MathML for assistive technology.

## Notes

- Pass your own instance with the `katex` prop to skip the dynamic import.

## See also

- Graph 2D: https://ui.indoku.org/docs/graph-2d
- Plot 2D: https://ui.indoku.org/docs/plot-2d