Component library showcase tiles

The design systems team runs this whenever a component ships or changes. The library already has the real components. The tiles have to show those components. When a radius or a label changes in the library, the tiles have to become true again without a pass over a design file.

You run the same export after every library change. The person doing it already owns the components. They should not keep a second picture of each one.

The job is one PNG per library component, nested by category folder. Each tile centers the real component on a labeled board. One export writes the set. Adding a component means adding an artboard and a small data file, then running the same command. The next change is the same command again.

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

The component is .lerret/design-system/component-tile.jsx. It renders the real library component centered on a labeled tile. The tile is React. The thing on the tile is the same React the product ships. The artboards live under .lerret/design-system/, grouped the way the library is grouped.

Data is one artboard per component, each with colocated data naming the component and its demo props. 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, because each artboard already has its own file. There is no batch product, no queue, no orchestrator.

The images are PNGs, one per component, nested by category folder.

The tile shows the actual component from the actual library, not a picture of it. When the button’s radius changes, re-running export makes every tile true again. A folder of design-file exports will keep the old radius until someone opens each frame. You use Lerret because the tile is the library, and a re-run is how the set stays true.

npx @lerret/cli@latest export

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