# Patterns Product-shaped compositions. `PageHeader`, `KpiCard`, `Filters`, `GhAreaChart`. Patterns compose primitives, components, and recipes with knowledge of how Ghost actually uses them. Page-level wrappers like `ListPage` live in the separate [Page templates](./page-types.md) layer. ## Use a pattern when - The shape is one Ghost reuses across surfaces (page headers, list pages, KPI rows). - You'd otherwise be rebuilding the same chrome from primitives + components every time. - The page-type taxonomy on [Page Types](./page-types.md) names it. ## What patterns do (and don't) | Do | Don't | | -------------------------------------------------------------- | ------------------------------------------------------------ | | Expose 3–6 named subcomponents (`.Title`, `.Actions`, `.Body`) | Take a prop bag (`title`, `onAdd`, `columns`, `emptyText` …) | | Compose components, primitives, recipes | Fetch data, own routing, read app context | | Carry generic names (`PageHeader`, `KpiCard`) | Carry surface-specific names (`MembersFilterBar`) | | Stay stable across consumers | Add a prop every time a new consumer needs something | If you find `useQuery` inside a pattern, the boundary is wrong — bring-your-own state. Promotion rules and the full decision flow: [Layers](https://github.com/TryGhost/Ghost/blob/main/apps/shade/CONTRIBUTING.md#layers), in Contributing to Shade. ## Example ```tsx import {PageHeader} from '@tryghost/shade/patterns'; import {Button} from '@tryghost/shade/components'; Members{count} Add member ``` For the full list-page wrapper (`ListPage` composing `PageHeader` + body), see [Page templates / Page types](./page-types.md). Browse the sidebar for the live list of patterns.