shadcn.io is not affiliated with official shadcn/ui
Periodic Table Element Features Block for React
A periodic table of eight platform primitives with a category legend that tints the others and a line under the table for the element you choose.
Installation
Overview
A periodic-table feature section for React with Base UI. A centred header says "Eight primitives, everything you ship". Under it, a legend of toggles (All, Core, Data, Edge, Experimental) sits in a band, and below it eight elements share hairlines in a four by two grid: each has its number, its category, a two-letter symbol at display size, its name and one property in mono. Choosing a category tints the elements outside it, with a line that says how many are left, and choosing an element opens its description in a band under the table. It's built from Toggle Group and Badge, with CSS transitions for the entrance and the tint and your theme's tokens for every colour. For developer platforms and toolkits whose parts are best seen side by side.
FAQ
How do I change the elements?
Edit ELEMENTS at the top of the file: each entry has a symbol, a name, a category, one property and a detail sentence. The number on a cell is its place in the list, and the legend's categories come from CATEGORIES, so a new category is one line. Keep the count at a multiple of four so the grid fills its rows from md.
How does the legend work?
It is a toggle group in multiple-selection mode, so each button is a real toggle button that reports whether it is pressed. A small handler keeps exactly one pressed: pressing the pressed button does nothing, and pressing another moves the choice. Arrow keys move between the buttons.
Are the dimmed elements still usable?
Yes. A dimmed cell takes a solid tint and its text drops to a slightly softer foreground that keeps its contrast; it stays a button you can focus and choose. Its category is still written on it, so the dimming never carries meaning alone.
Related
- Pro
Keyboard Focus Grid Features
Live controlsA six-cell feature grid for a keyboard-first notes app: one focus ring glides between cells with the arrow keys, and Enter or a tap writes the cell's detail into a strip under the grid.
- Pro
Badge Counter Wall Features
Metrics and chartsA wall of eight channel counters for a unified inbox, with a two-button toggle that switches between every channel and only those with unread messages.
- Pro
Glossary Term Grid Features
Documents and objectsA glossary: an A to Z rail of anchor links where only letters with a term are active, and eight terms in two columns of shared hairlines, each with its part of speech, a definition and a See also link.
- Pro
Compliance Badge Grid Features
Metrics and chartsSix control cards for a privacy-operations tool, each with a coverage ring counted from the data, a sentence of counts and a Passing or open-items badge.
- Pro
Skill Tree Branch Graph Features
Diagrams and mapsA dependency tree of nine toggles for a modular SDK: switching a module on switches on what it needs, switching one off switches off what depends on it, and a counter and a bundle size follow.
- Pro
Achievement Trophy Wall Features
Metrics and chartsA wall of eight milestone badges for a language-learning app: unlocked ones solid, locked ones muted with a lock and a progress bar, a header count, and a tooltip with each unlock rule.