/>
MDX UI
$ init
Math Solution

Math Solution

Step-by-step solution blocks with reasons, highlights, and a final answer — for worked examples and proofs

Find: ∫(sin x + cos x) dx
Use the standard formulas: ∫sin x dx = −cos x + C and ∫cos x dx = sin x + C
∫sin x dx + ∫cos x dxSplit the integral
−cos x + sin xApply standard formulas
−cos x + sin x + CAdd constant of integration
∴−cos x + sin x + C

Try it live

loading…

Installation

npx @ravikumarsurya/mdx-ui add math-solution

Solution

A bordered container for a worked mathematical solution. The optional title shows the problem statement in a header.

<Solution title="Solve: 2x + 4 = 10">
  <SolutionStep reason="Given">2x + 4 = 10</SolutionStep>
  <SolutionStep reason="Subtract 4">2x = 6</SolutionStep>
  <SolutionStep reason="Divide by 2">x = 3</SolutionStep>
  <SolutionAnswer>x = 3</SolutionAnswer>
</Solution>
Solve: 2x + 4 = 10
2x + 4 = 10Given
2x = 6Subtract 4 from both sides
x = 3Divide both sides by 2
∴x = 3

With LaTeX expressions

Use M for inline LaTeX inside steps:

<Solution title="Quadratic formula derivation">
  <SolutionStep reason="Standard form">
    <M expr="ax^2 + bx + c = 0" />
  </SolutionStep>
  <SolutionStep reason="Divide by a">
    <M expr="x^2 + \frac{b}{a}x = -\frac{c}{a}" />
  </SolutionStep>
  <SolutionStep reason="Complete the square" highlight>
    <M expr="\left(x + \frac{b}{2a}\right)^2 = \frac{b^2 - 4ac}{4a^2}" />
  </SolutionStep>
  <SolutionStep reason="Take square root">
    <M expr="x + \frac{b}{2a} = \pm\frac{\sqrt{b^2-4ac}}{2a}" />
  </SolutionStep>
  <SolutionAnswer>
    <M expr="x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}" />
  </SolutionAnswer>
</Solution>
Quadratic formula derivation
ax2+bx+c=0ax^2 + bx + c = 0Standard form
x2+bax=−cax^2 + \frac{b}{a}x = -\frac{c}{a}Divide by a
(x+b2a)2=b2−4ac4a2\left(x + \frac{b}{2a}\right)^2 = \frac{b^2 - 4ac}{4a^2}Complete the square
x+b2a=±b2−4ac2ax + \frac{b}{2a} = \pm\frac{\sqrt{b^2-4ac}}{2a}Take square root
∴x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

SolutionNote

Use SolutionNote for commentary that is not an algebraic step — identities used, constraints to keep in mind, or explanatory remarks.

<Solution title="Prove: sin²θ + cos²θ = 1">
  <SolutionNote>
    Start from the Pythagorean theorem on the unit circle.
  </SolutionNote>
  <SolutionStep reason="Unit circle definition">
    <M expr="x^2 + y^2 = 1" />
  </SolutionStep>
  <SolutionStep reason="Substitute trig definitions">
    <M expr="\cos^2\theta + \sin^2\theta = 1" />
  </SolutionStep>
  <SolutionAnswer>
    <M expr="\sin^2\theta + \cos^2\theta = 1" /> <QED />
  </SolutionAnswer>
</Solution>
Prove: sin²θ + cos²θ = 1

Start from the Pythagorean theorem on the unit circle.

x2+y2=1x^2 + y^2 = 1Unit circle definition
cos⁡2θ+sin⁡2θ=1\cos^2\theta + \sin^2\theta = 1Substitute trig definitions
∴sin⁡2θ+cos⁡2θ=1\sin^2\theta + \cos^2\theta = 1

Highlight

Add highlight to a SolutionStep to visually mark the key transformation in a derivation.

<SolutionStep reason="Critical step" highlight>
  ...
</SolutionStep>

Props

Solution

PropTypeDefaultDescription
titlestring—Problem statement in header
childrenReactNode—SolutionStep, SolutionNote, SolutionAnswer
classNamestring—Additional CSS classes

SolutionStep

PropTypeDefaultDescription
reasonstring—Explanation shown right-aligned
highlightbooleanfalseHighlight background on key step
childrenReactNode—Math expression for this step
classNamestring—Additional CSS classes

SolutionAnswer

PropTypeDefaultDescription
childrenReactNode—Final answer expression
classNamestring—Additional CSS classes

SolutionNote

PropTypeDefaultDescription
childrenReactNode—Commentary or annotation text
classNamestring—Additional CSS classes
PreviousMath Primitives
NextMermaid