Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Component Catalogue Gallery Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A component catalogue for React with Base 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.

Are the drawings the real components?

No. They are small pictures made of boxes, so the page loads nothing heavy. To show the real component instead, render it in the tile's box in place of the drawing.

Which keys work?

The Status group is one tab stop, and the arrow keys move between its choices. Tab then reaches the Show variants switch, which Space flips.

  • Pro

    Searchable Icon Grid Gallery

    Design assets

    Forty-eight drawn glyphs on shared hairlines with a search field, category tabs, a size toggle and a stroke slider, where pressing a glyph copies its name and confirms it in place.

  • Pro

    Color Token Grid Gallery

    Design assets

    Twelve of the theme's own colour tokens as swatches on shared hairlines, each with its name and its painted value in the format you choose, and a Copy button that copies exactly that text.

  • Pro

    Logo Lockups Gallery

    Design assets

    Four drawn logo lockups in framed cells with a Show clear space toggle that lays the margin over every lockup, and real SVG and PNG downloads under each.

  • Pro

    Filterable Gallery

    Filter, sort and tabs

    Twelve drawn pictures on shared hairlines with a band of chips, each with a count, that keeps only one kind of work and says how many are showing.

  • Pro

    Variant Matrix Gallery

    Design assets

    A native table of drawn mugs by glaze and size, where hovering or focusing a cell lights its row and column heads and the cells between them, and choosing a cell writes its stock in a status line that keeps its height.

  • Pro

    Type Tester Gallery

    Design assets

    A preview text field, a Weight slider, a Size slider and a Case control set one line in the theme's Sans, Serif and Mono stacks, above a table of the nine weights that marks the current one.

All 100 gallery blocks