Recipes
Each recipe is a worked solution to one problem — start to finish, with the code you need. Where a concept page explains how motif thinks, a recipe shows you what to type.
Patterns
Build a feature or solve a styling problem against motif's runtime.
| Recipe | What you build |
|---|---|
| Dark mode toggle | A three-way light/dark/system toggle on useThemeSetting, with no first-paint flash. |
| Build a design system | A typed, themed design system — tokens, primitives, components packaged for consumers. |
| Theming CMS content | A per-section theme for content loaded from a CMS — pre-registered or runtime themes. |
| Animation | Prop-change transitions, mount-in entrances, and unmount-out exits with motion props. |
| Forms | Accessible forms with Field, Label, Input, FieldHelp, and FieldError. |
| Sub-themes per route | A route or route group with its own Theme boundary or theme chain. |
| Print styles | A print stylesheet — paper tokens, hidden chrome, controlled page breaks. |
Migrating from another library
Move an existing codebase onto motif. Each recipe maps the old idioms to motif's, with a worked example and an honest account of where the two libraries genuinely differ.
| Recipe | Coming from |
|---|---|
| Migrate from styled-components | styled-components |
| Migrate from Emotion | Emotion |
| Migrate from Tailwind | Tailwind |
| Migrate from Tamagui | Tamagui |