shadcn.io is not affiliated with official shadcn/ui
Frame Wall Stats Integration Block for React
An integration stats section for a design-docs tool connected to Figma: three counts on shared hairlines and a framed wall of tiny frame outlines by page, filled when linked, ringed when changed and dashed when not linked, with a toggle that dims all but the changed frames.
Installation
Overview
An integration stats section for React with Base UI, written for Framenote, a fictional tool that keeps design docs in step with a Figma file, and its Figma connection. A start-aligned header says which frames your docs follow, with one sentence, and at its end the mark pair (Framenote's own tile and Figma's neutral lettermark tile, joined by a connector). Under a band rule, three figures sit on shared hairlines: frames linked and current, frames changed since the last sync, and frames not linked to a doc section. Below them a framed wall with + marks on its corners draws five pages (Onboarding, Dashboard, Billing, Settings, Mobile) as rows of tiny greyscale frame outlines, wide, tall or square: filled for a linked frame, ringed for one that changed since the last sync, dashed and empty for one with no doc section. A toggle (All, Changed) at the top of the wall dims everything but the changed frames, and a polite status line says what is shown. A legend in the foot band names the three looks, and the whole wall wraps to six outlines to a row on a phone. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides and Toggle Group, with CSS transitions and your theme's tokens for every colour: the states differ by fill, ring and dash, not by hue. Figma is named in text only: no Figma logo, colour or wordmark ships with the block. The wall is example data; nothing is read from Figma.
FAQ
Where do the three numbers come from?
They are counted from the wall. Each page in PAGES has a codes string with one two-letter code per frame (the first letter is the outline's shape, the second its state: l linked and current, c changed since the last sync, u not linked), and the figures, the per-page counts in the hidden table and the "Showing 6 that changed" line all use the same helpers. Edit a code and every figure follows; there is no second list of numbers to keep in step.
How does a screen reader get the wall?
The outlines are decorative and hidden from assistive technology. A visually hidden table inside the figure lists each page with its linked, changed and not-linked counts, and the three figures above are a description list. The toggle group is named "Show frames", and the polite status line announces the new view when you change it.
What does the Changed view do?
It dims every frame that did not change since the last sync: filled frames fade to a solid tint, dashed ones to a faint dash, and the ringed frames stay as they are. Nothing moves or resizes, so the wall keeps its height and the page does not jump. The toggle always has one view pressed. The group is controlled with an array value and ignores an empty array.
Why are the states not coloured?
The block follows your theme and uses no hue, so a state is told apart by shape: a solid fill, a ring around a lighter fill, a dashed empty box. The legend and the text say the same thing in words, so the wall never depends on colour or on seeing the drawing.
Can I show Figma's logo?
The block names Figma in text and ships no Figma logo, colour or wordmark. Figma's tile is a neutral lettermark, Fg in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. The frame outlines are generic rectangles, not copies of Figma's interface.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
The three figures stay on one row with their labels wrapping, and each page's name moves above its outlines, which wrap to rows of six. The wall keeps its left-to-right order in a right-to-left layout, because it draws a sequence of frames; the header, figures and legend follow the page. The dimming is a short colour transition that is off with reduced motion, and the header fades up once on load; with reduced motion it simply appears.
Related
- Pro
Hotspot Canvas Detail Integration
With a product drawingAn integration detail section for a design-docs tool connecting to Figma: a framed canvas sketch at the start whose frames, comment pin and variables panel light up as you point at the three read-only scopes, with three steps and Connect Figma.
- Pro
Grouped Comments List Integration
Grouped and triagedAn integration list section for a design-docs tool connected to Figma: comments grouped by frame in an accordion running rail to rail, a toggle that hides resolved ones without moving a header, and a Retry for the one comment that failed to sync.
- Pro
Token Collections Grid Integration
Switch and tick gridsAn integration grid section for a design-docs tool connected to Figma: four variable collections (Colour, Type, Radius, Spacing) on shared hairlines, each with a mode switch that redraws its greyscale sample and a switch for syncing it to a tokens file, with a live tally.
- Pro
Frame Thumbnails Setup Integration
Guided stepsAn integration setup section for a design-docs tool connecting to Figma, in one framed window: paste a personal access token, tick greyscale wireframe thumbnails of the frames to link, name the link and watch its address follow, then finish with an honest result.
- Pro
Legend Filter Heatmap Stats
HeatmapsA 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
Status Matrix Stats
HeatmapsSix services by the last eight hourly check windows: passing cells in a foreground tone, degraded cells half filled, a failed cell outlined with a cross and the destructive dot, tooltips and an uptime column.