/>
MDX UI
$ init
Math Primitives

Math Primitives

370+ JSX components for every standard math symbol — the single math system for mdx-ui. No LaTeX engine required.

a + b2c√a2 + b2∞∫0e−x dxnΣk=1k22[abcd]sin(θ)if x ≥ 0cos(θ)if x < 0

Installation

pnpm dlx @ravikumarsurya/mdx-ui add math-primitives

The single math system

Math primitives are the only math API in mdx-ui. Every component is pure React/CSS — no KaTeX, no LaTeX strings, no engine required.

Each component reads exactly like what it renders:

<Frac num="a" den="b" /> → a/b fraction
<Pow exp="2">x</Pow> → x²
<Integral from="0" to="1">
  f(x) dx
</Integral>
→ ∫₀¹ f(x) dx
<Alpha /> → α<Angle>ABC</Angle> → ∠ABC

Composing complex expressions

Wrap sub-expressions in {<span>...</span>} when passing them as JSX props:

{/* Quadratic formula */}
x = <Frac
num={<span>−b <PlusMinus /> <Sqrt><Squared>b</Squared> − 4ac</Sqrt></span>}
den="2a"
/>
 
{/* Gaussian integral */}
 
<Integral
  from={
    <span>
      −<Inf />
    </span>
  }
  to={<Inf />}
>
  <Pow
    exp={
      <span>
        −<Squared>x</Squared>
      </span>
    }
  >
    e
  </Pow>{" "}
  <Differential />x
</Integral>
PreviousMath Equation
NextMath Solution