Pricing tier graphics

Marketing runs this whenever pricing changes. Starter, Pro, and Enterprise each need a card that shows the current price, the billing period, and the feature list for that tier. Those numbers move more often than the layout does. The three cards have to move together.

This is not a one-time pricing poster. A later change to Pro’s price has to update the Pro card without leaving Starter and Enterprise on an older look. The set has to stay visually consistent when any one number moves.

The job is one graphic per tier, all produced from the same component. A price change cannot leave one card on an old number. The three cards ship as a set. One edit in the data file should re-render all three in the same run. The feature lists can differ by tier. The type and the spacing should not.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG per named export. Same component, data swapped, many images. There is no batch product, no queue, no orchestrator.

The component is .lerret/commerce/pricing.jsx, with named exports per tier: Starter, Pro, and Enterprise. That is the same shape as the acme preset’s pricing variants. Each named export is one tier card. The layout stays in the component. The values come from data. Starter, Pro, and Enterprise are three exports of one file, so the cards stay related.

The data is one file keyed by tier. Each key holds { price, period, features: [] }. That is bulk pattern 3: named-export variants plus per-variant keyed data in one data file. One export run writes all three cards. The features array is mapped in the component, so a short list and a longer list both lay out from the same file. Change a price, change a period, add a feature: you edit the keyed file and re-run. The key names match the named exports, so Pro reads the Pro block.

The image is a PNG 1200×630 per tier.

A price change touches one number in one file and all three tier cards re-render together, still visually consistent. Nobody has to open three design frames and type the new price by hand. The period and the feature list live in the same keyed file, so they stay in sync with the price. The next pricing change is the same command over the same component.

npx @lerret/cli@latest export

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