Recipes
Page and block examples built from Pluma components, in React and Ember, to copy into your app as a starting point.
A recipe is a working example of a whole screen or of one block inside a screen, built from Pluma components the way Customer.io product screens use them. You copy a recipe into your app, and from then on the file is your own code: it imports Pluma like the rest of your app, and nothing ties it back to the recipe.
Start from a recipe when the screen or block you are building matches a recipe's description. It gives you the layout, the components and the props that suit the job, with placeholder copy to replace. Start from the component docs instead when you need one component on its own, or when no recipe comes close.
Page recipes
A page recipe is a whole screen, from the page header down.
Choose a type
Use this page as the first step of a creation flow, when people pick what kind of thing to create before setting it up, such as choosing how a new campaign starts. Each type is a card with an icon, a title and a short description, the most common type starts out chosen, and Continue moves on to the setup for that type. Use a setup wizard for the steps that follow, and radios inside a form instead when the choice is one field among many.
Dashboard overview
Use this page as the landing view that summarizes how a workspace is performing over a recent period, such as its messaging over the last 30 days. It leads with a row of headline metrics compared with the previous period, follows with charts of the daily trends, and ends with a table of the latest activity. Use it when people need to check performance at a glance before drilling into a specific campaign or report.
Editor with preview
Use this page when people write or edit content that they need to see rendered as they work, such as an in-app message or the body of an email. The fields sit beside a live preview of the current values, and the page header keeps Discard changes, Save draft and Publish in reach. Use a settings form instead when there is nothing to preview.
List with drawer detail
Use this page for a collection, such as a workspace's segments, where people often need a quick look at one item without losing their place in the list. Selecting an item's name opens a drawer beside the list with that item's details and an action to edit it. Use it when the details fit in a short summary; when people need the item's full history or tabs, link to a detail page instead.
List with filters
Use this page for the index of a collection people browse and narrow down, such as a workspace's campaigns, with the action that creates a new one in the header. People search by name, add filters to refine the list, and page through the results in a table. Use it when the collection is too large to scan in one screen.
Object detail
Use this page for a single record, such as one person, segment or campaign, when people need to see what it is, what state it is in and what has happened to it. The header names the record, reports its status, holds the actions that apply to the whole record and links to its other views as tabs. The body puts the record's history in the main column and a summary of its attributes beside it.
Segment builder
Use this page when people define a group of people by rules on their attributes and activity, such as everyone on the Growth plan who signed up in the last 30 days. They name the group, build the conditions everyone in it has to match, and see how many people match as they edit. Use a list with filters instead when people only narrow a list for the moment and don't save the rules.
Settings form
Use this page when people edit the configuration of a whole workspace, account or integration and save it in one go, such as a workspace's name, timezone and default sender. It names the screen and its scope in the header and keeps the fields in a narrow column, with Cancel and Save changes at the end of the form. Add a panel per group of related settings as the page grows.
Setup wizard
Use this page to walk people through creating or connecting something that takes several ordered steps of input, such as adding a sending domain, one step at a time. A stepper shows where they are and takes them back to finished steps, Back and Continue move between steps, and a final review step lists every value before the action that creates it. Use a single form instead when the fields do not depend on each other.
Block recipes
A block recipe is one panel or form section to place inside a page.
Empty state with call to action
Use this block when a list or panel has nothing to show yet and one action would fill it, such as creating the first campaign. It explains what is missing and puts the action that creates it front and center. Keep it in place of the content it stands in for, inside the same panel.
Form section
Use this block for one titled group of related fields, such as sender details, inside a longer form or settings page. Stack several of them to break a long form into sections people can scan, each with a short description of what its fields control. Mark the fields people can leave empty as optional and add help text where a field needs it.
Panel with description list
Use this block to summarize one object, such as a campaign, segment or person, as a short list of labeled facts on its detail page. Each row pairs a label with its value, so people can scan status, configuration and dates at a glance. Put the action that changes these facts, such as editing them, in the panel header.
Workflow
- Describe the screen to
pluma-cli plan "<idea>", or to theplan_uitool of the Pluma MCP server. It names the page recipe to start from, the block recipes and components that fit, and the command that copies the starter. - Look at the recipe with
pluma-cli scaffold --show <recipe-id>: its components, the packages it imports, and its source. - Copy the recipe into your app with
pluma-cli scaffold <recipe-id> <dest-dir> --framework react, or--framework ember. - Look up each component's props on its docs page. Every recipe page links to the components it uses.
The CLI page covers how to run the CLI and every option of plan and scaffold.