Recipes

Compositional how-tos that wire multiple mantle primitives together with state, data, or routing. Use these when a component page is too small and a full app flow is too much. Each recipe is written to be handed directly to a coding agent — append .md to any recipe’s URL to fetch its raw markdown.

Assistant Across RoutesRender an assistant in main on its own route and in the AppLayout side panel on every other route, with one conversation above both and a 300ms View Transition that morphs the page into the panel.

Breadcrumbs from RoutesDerive a breadcrumb trail from the matched route chain with React Router route handles — derived state, so it is correct on the server and on the first frame, with no context and no effects.

Filter from a ValueTurn a value in a table row into a Query filter with one click, and take it out with a second click. One pure function, toggleFacet, does the edit.

Header Actions from RoutesPut each route's actions in the app header's actions slot from a React Router route handle. The deepest route wins, the server renders them, and below the mobile breakpoint they collapse into one menu.

List Page Loading StatesRender a list page's header, filters, and column headers on the first frame, then fill the table with skeleton rows that match the loaded rows, so nothing shifts when the data lands.

Overlays + Async DataOpen a Sheet, Dialog, or Alert Dialog immediately, then swap the body between pending, loaded, 404, and 500 states with TanStack Query.

Query from the URLKeep the text of a Query field in the ?q= URL param, so a filtered list is shareable by its URL. One small hook for React Router, and the same hook with nuqs.

Route AnnouncerAnnounce completed client-side navigations to screen readers by pairing a persistent LiveRegion with React Router's location, with page-name fallbacks and repeat-message handling.

Sparklines in a ListPut two BarChart sparklines in every row of a DataTable: sized for a row, named for the row, with a compact total beside each one, and dormant until a reader scrolls to it.

Proposals

Recipes with an open design question. They are not yet a recommended pattern. Each one states what is still open.

Natural Language QueryLet people describe a filter in plain words, and turn the words into a Query filter on Enter through ngrok.ai gateway inference, with a mock translator, a refusal check, and Revert.