Periodic Table

Multi-value Heatmap

2-fold Split (Diagonal)

Each element shows two values as diagonal triangles: top-left = atomic mass, bottom-right = density.

4-fold Split

Each element shows four values as quadrants: top-left = atomic radius, top-right = electronegativity * 100, bottom-left = covalent radius, bottom-right = |electron affinity|.

Missing Color Demo

The missing prop ({ color, label, style }) styles tiles with no heatmap value. color takes any CSS color or 'element-category' (default: category colors for a plain table, gray for a heatmap); label and style further decorate missing tiles (e.g. style="opacity: 0.4" to dim them). Note 0 is a real value mapped through the color scale. Only absent / null entries count as missing.

Active Elements Border Styling

Customize active element borders with CSS custom property --elem-tile-active-border.

Auto-Scaling Color Bar

When show_color_bar is enabled (the default) and no custom inset is provided, the periodic table automatically displays a color bar that scales with the table size. The color bar font and bar width adapt to container width using container queries.

2×2 Grid Layout