React Periodic Table
The most recognizable object in science, as a component: all 118 elements on the correct 18×7 grid with the lanthanide and actinide pull-out rows, category color on each cell (drawn from the chart tokens, with a thin colored top rule so category never depends on fill alone), hover/click selection with a detail panel, and a highlight filter that dims everything outside a group — metals, metalloids, nonmetals, or your own set. Element data ships in a separate elements.ts you can extend with your own properties.
Highlight
Alkali metalAlkaline earthTransition metalPost-transitionMetalloidNonmetalHalogenNoble gasLanthanideActinide
Hover any element for its detail; the filter dims everything outside the selected group.
Installation
npx shadcn@latest add periodic-table.json
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| selected | number | — | Controlled selection by atomic number |
| onSelect | (element: Element) => void | — | Selection callback |
| highlightCategories | ElementCategory[] | — | Only these stay bright; others dim |