UI Wall
A six-screen product interface grid with state-level captions showing the full range of a design system from empty states to dense data views.
A six-screen product interface grid with state-level captions showing the full range of a design system from empty states to dense data views.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
UI Wall shows six screens from the Ledger product design system in a uniform three-column grid, each with a short caption that names the view and its state, Onboarding step 1 of 3, Dashboard overview, Settings account, Inbox unread, Report monthly, and Search results. The count label, 6 screens, sits inline with the heading at the top right using tabular-nums.
All six screens are one array of Placeholder tiles at aspect-video. Captioning each screen with its state, not just its name, is the distinctive detail: it shows range and the depth of coverage in a single scan.
Reach for this block as the interface overview on a product design portfolio or after a case study to show the full screen count. The installer swaps the product name in the lede and replaces the six captions with the actual screen names and states.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the product screens overview. Other interface layouts:
Tip: name the state as well as the screen; Dashboard overview says more than Dashboard.