React Chemistry Notation
Render chemistry the way chemists write it. Formula turns a compact string into proper subscripts and superscript charges (H2SO4 → H₂SO₄, SO4^2- → SO₄²⁻). Reaction lays out reactants → products with physical states and labels over/under the arrow, including reversible ⇌. And two safety marks every lab and chemical catalog needs: the NFPA 704 fire diamond (health/flammability/instability/special) and GHS hazard pictograms, both with accessible labels — safety information is never color or glyph alone.
Formulas — subscripts & charges
H2SO4C6H12O6SO42-Fe3+Ca(OH)2CuSO4·5H2O
Reactions — states & conditions
2H2(g)+O2(g)→2H2O(l)
N2(g)+3H2(g)Fe cat.⇌450 °C2NH3(g)
SiCl4(g)+2H2(g)→Si(s)+4HCl(g)
Safety — NFPA 704 & GHS
3
0
W
1
Installation
npx shadcn@latest add chem-notation.json
Usage
Loading...
Formula syntax: digits after a letter/paren become subscripts; ^ starts a superscript run (Fe^3+); · and spaces pass through.
Props
| Component | Key props | Description |
|---|---|---|
| Formula | children: string | Subscript/superscript formatter |
| Reaction | reactants, products ({ formula, coeff?, state? }[]), over?, under?, reversible? | Balanced equation layout |
| Nfpa704 | health, flammability, instability (0–4), special? | Fire diamond |
| GhsPictogram | hazard, showLabel?, size? | GHS hazard diamond |