shadcn.io is not affiliated with official shadcn/ui
Periodic Table Element Features Block for Solid
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 Solid with Ark 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.