DocsUI
$ 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 docsui-cli@latest 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

Composing with primitives

Use math primitives directly inside steps — no LaTeX engine required.

<Solution title="Quadratic formula derivation">
  <SolutionStep reason="Standard form">
    a<Pow exp="2">x</Pow> <Plus /> bx <Plus /> c <Eq /> 0
  </SolutionStep>
  <SolutionStep reason="Divide by a">
    <Pow exp="2">x</Pow> <Plus /> <Frac num="b" den="a" />x <Eq /> <Minus /><Frac num="c" den="a" />
  </SolutionStep>
  <SolutionStep reason="Complete the square" highlight>
    <Pow exp="2"><Paren>x <Plus /> <Frac num="b" den="2a" /></Paren></Pow> <Eq /> <Frac num={<Expr><Pow exp="2">b</Pow> <Minus /> 4ac</Expr>} den={<Expr>4<Pow exp="2">a</Pow></Expr>} />
  </SolutionStep>
  <SolutionStep reason="Take square root">
    x <Plus /> <Frac num="b" den="2a" /> <Eq /> <PlusMinus /><Frac num={<Sqrt><Expr><Pow exp="2">b</Pow> <Minus /> 4ac</Expr></Sqrt>} den="2a" />
  </SolutionStep>
  <SolutionAnswer>
    x <Eq /> <Frac num={<Expr><Minus />b <PlusMinus /> <Sqrt><Expr><Pow exp="2">b</Pow> <Minus /> 4ac</Expr></Sqrt></Expr>} den="2a" />
  </SolutionAnswer>
</Solution>
Quadratic formula derivation

ax2 + bx + c = 0

Standard form

x2 + bax = −ca

Divide by a
(x + b2a)2=b2 − 4ac4a2Complete the square

x + b2a = ±√b2 − 4ac2a

Take square root
∴

x = −b ± √b2 − 4ac2a

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">
    <Pow exp="2">x</Pow> <Plus /> <Pow exp="2">y</Pow> <Eq /> 1
  </SolutionStep>
  <SolutionStep reason="Substitute trig definitions">
    <Pow exp="2"><Cos /></Pow><Theta /> <Plus /> <Pow exp="2"><Sin /></Pow><Theta /> <Eq /> 1
  </SolutionStep>
  <SolutionAnswer>
    <Pow exp="2"><Sin /></Pow><Theta /> <Plus /> <Pow exp="2"><Cos /></Pow><Theta /> <Eq /> 1 <QED />
  </SolutionAnswer>
</Solution>
Prove: sin²θ + cos²θ = 1

Start from the Pythagorean theorem on the unit circle.

x2 + y2 = 1

Unit circle definition

cos2θ + sin2θ = 1

Substitute trig definitions
∴

sin2θ + cos2θ = 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