shadcn.io is not affiliated with official shadcn/ui
Component Catalogue Gallery Block for Solid
Twelve components drawn in plain boxes on shared hairlines, each with a status badge and a variant count, a status filter, and a Show variants switch that turns every drawing into its list of variants.
Installation
Overview
A component catalogue for Solid with Ark UI. A start-aligned header sits over a band holding a status filter (All, Stable, Beta and Deprecated, each with its count) and a Show variants switch, then twelve tiles on shared hairlines, four across on a wide screen, three on a tablet and two on a phone, ending the block. Every tile draws its component in plain boxes (a button, an input, a switch, tabs and so on), names it, gives a status badge (a filled dot for Stable, a hollow one for Beta, a bar for Deprecated, always with the word) and counts its variants. The switch turns every drawing into the list of that component's variants in the same box, so no tile changes size. The filter moves the matching tiles to the start and leaves the other cells blank, so the grid keeps its height, and a polite line says how many are shown. It's built from Guides, ToggleGroup, Switch and Badge. For design-system sites and component audits.
FAQ
How is status shown without colour?
By a dot and a word: a filled dot for Stable, a hollow dot for Beta and a short bar for Deprecated, each beside the status in text. Nothing relies on a hue.
What does Show variants do?
It swaps every tile's drawing for the list of that component's variants, in the same box. The count under the name does not change, and no tile grows, so the grid keeps its height.
What does the filter do?
It shows one status at a time (or all), with the count in each choice. The matching tiles move to the start of the grid and the remaining cells stay blank; the status line says how many of the twelve are showing.
Where does the catalogue's data live?
In the COMPONENTS list: a name, a status, a list of variants and a list of the boxes that draw the component. The counts in the filter and under each name are derived from that list. The statuses here are example data.