Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Linked Small Multiples Gallery Block for React

The same twelve months drawn six ways on shared hairlines, with a Month slider (and the pointer over any chart) that highlights that month in all six and reads out its value, share and rank.

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

Small multiples for React with Base UI. A centred header sits over a band with one Month slider, then six charts of the same twelve months of reports sent on shared hairlines, three across from a tablet and two on a phone: bars, a line, an area, dots, a donut of shares and a heat strip. The slider picks a month and that month is highlighted in all six at once; pointing at a month in any chart does the same. The band reads out the month in words: its value, its share of the year and its rank. The charts are drawn from the data with boxes, one stretched line path and circle arcs, in the theme's foreground at a few strengths. They are hidden from screen readers, which get one table of the twelve readings after them. The figures are example data. It's built from Guides and Slider. For reporting tools and dashboards.

FAQ

What is linked about the charts?

They share one picked month. Dragging the slider, or pointing at a month in any chart, highlights that month in every chart and updates the sentence in the band.

Can I do it without a mouse?

Yes. The slider takes the arrow keys, Home and End, and moves the highlight in all six charts; its value text reads the month and its count. Pointing at a chart is only a second way to pick, so nothing is hover-only.

How do I use my own data?

Edit the MONTHS list: each entry is a month and a value. The chart scale, the paths, the arcs, the heat steps, the shares and the ranks are all computed from it, and so is the table for screen readers.

How do screen readers get the charts?

Each drawing is hidden from them. A table after the charts lists every month, its reports and its share of the year, and a polite line announces the picked month.

Why are the charts grey?

So they follow every theme and never ask a viewer to tell hues apart. The picked month is the full foreground and the rest are a lighter mix, and the heat strip shows the count in each cell as well as its tone.

How does it fit on a phone?

The charts are two across and the slider has the band to itself, with the readout under it. The heat strip drops its numbers when the cells are too narrow to hold them; the readout and the table still have every value.

  • Pro

    Legend Filter Heatmap Stats

    Heatmaps

    A twelve-week by seven-day commit heatmap whose five-step legend is a set of toggles: choosing a level keeps only those days at full strength, outlines the rest and counts the days.

  • Pro

    Donut Pill Legend Stats

    Parts of a whole

    A traffic-source donut over a row of pill toggles: switch a source off and its arc leaves the ring, the others grow to fill it, and the shares and the total in the middle are worked out again.

  • Pro

    Analytics Widget Dashboard Features

    Metrics and charts

    A job-queue dashboard drawn as a window in a hairline frame: a range control in its title bar re-draws the throughput line and re-reads the uptime and outcome figures, beside a seven-bar week.

  • Pro

    Community Growth Chart About

    Numbers

    A community's growth in one framed area chart, month by month for a year, beside three channel counts (forum, chat, office hours) that roll up as they scroll into view.

  • 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

    Component Catalogue Gallery

    Design assets

    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.

All 100 gallery blocks