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
Reactions — states & conditions
Safety — NFPA 704 & GHS
Installation
Usage
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 |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.