/>
MDX UI
$ init
Math Equation

Math Equation

Numbered display equations and systems of equations — compose with math-primitives

E = mc2(1)
x = −b ± √b² − 4ac2a(2)
2x + 3y = 7
x − y = 1

Installation

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

Equation

A centered display block with an optional equation number. Fill it with math-primitives for the equation content.

<Equation label="1">
  E = mc
  <Squared />
</Equation>

E = mc

2(1)

Quadratic formula

<Equation label="2">
  x ={" "}
  <Frac
    num={
      <span>
        −b <PlusMinus />{" "}
        <Sqrt>
          <Squared>b</Squared> − 4ac
        </Sqrt>
      </span>
    }
    den="2a"
  />
</Equation>

x =

−b ± √b2 − 4ac2a(2)

No label

<Equation>
  <Nabla />
  <Squared /> <Phi /> = 0
</Equation>
∇

2 φ = 0

Inline mode

Use inline to wrap an expression inside prose:

The identity <Equation inline><Pow exp={<span>i<PiSym /></span>}>e</Pow> + 1 = 0</Equation> connects five constants.

The identity eiπ + 1 = 0 connects five fundamental constants.

EqSystem

A system of simultaneous equations with an SVG left brace.

<EqSystem>
  <div>x + y = 5</div>
  <div>2x − y = 1</div>
</EqSystem>
x + y = 5
2x − y = 1

With primitives

<EqSystem>
  <div>
    <PDeriv of="u" by="t" /> = <Alpha /> <Nabla />
    <Squared />u
  </div>
  <div>u(x, 0) = f(x)</div>
  <div>u(0, t) = u(L, t) = 0</div>
</EqSystem>

∂∂u = α ∇ 2u

u(x, 0) = f(x)
u(0, t) = u(L, t) = 0

Props

Equation

PropTypeDefaultDescription
labelstring—Equation number shown right-aligned as (1)
inlinebooleanfalseInline span with no outer box
childrenReactNode—Math content — use math-primitives
classNamestring—Additional CSS classes

EqSystem

PropTypeDefaultDescription
childrenReactNode—One element per equation
classNamestring—Additional CSS classes
PreviousList
NextMath Primitives