Empty-state gallery for design review

A product designer needs this before a design review. Inbox, search, reports, and team each have an empty state. The review has to look at all of them in one place, and the empty states have to be the ones the app ships.

This happens before the review, not once when the empty copy is first written. The person doing it already owns the surfaces. They should not keep a separate mock of the empty headline and CTA.

The job is one PNG per surface, all from the same empty-state component. Each artboard has its own colocated data for that surface. One export writes the gallery. The review critiques the real headline, body, icon slot, and CTA. Next review, you edit the data that changed and run the same command.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, colocated data, many images.

The component is .lerret/product/empty-state.jsx. It draws an icon slot, a headline, a body, and a CTA button. Those are the fields the artboard knows. The surfaces (inbox, search, reports, team) are four artboards, not four components. The empty-state React is the same React the product uses.

Data is one artboard per surface with colocated data. This is the second of the four bulk patterns: many artboards with colocated .data.json / .data.js. One export captures them all. You do not pass --data for this run. Adding a fifth surface means adding an artboard and a data file. There is no batch product, no queue, no orchestrator.

The image is a PNG at the app’s content-area size. Inbox, search, reports, and team each get their own file in the set. The review can walk the folder in that order.

All the empty states sit in one place, all rendered from the same components the app ships, so the review critiques the real thing. A design file of empty states will keep an old CTA until someone opens each frame. You use Lerret because the gallery is the product empty states, in one folder, at the content-area size.

The gallery is stills from local files. Inbox, search, reports, and team are the four surfaces in the catalog. Each PNG is at the app’s content-area size.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.