shadcn.io is not affiliated with official shadcn/ui
Frame Wall Stats Integration Block for Ark UI
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 Ark 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.