# Composition

1. **Frame.** Page title, one-sentence description, and the primary action top right.
2. **Summary before detail.** KPIs or a status line first, then charts, then tables.
3. **One primary action per region.** Secondary actions are outline or ghost; destructive actions are separated and confirmed.
4. **States.** Every async region has loading (skeleton matching the final layout), empty (with the action that fills it) and error (with retry).
5. **Forms.** Labels above inputs, help text under, errors inline after blur or submit. Group into sections with a short heading; save bar or a single submit per form.
6. **Overlays.** Dialog for decisions, sheet/drawer for editing in context, popover for small pickers, toast for results. Never stack dialogs.
7. **Tables.** Left-align text, right-align numbers, sticky header, row actions in a menu, bulk actions when rows are selected.
8. **Navigation.** Sidebar for apps with more than five sections; tabs for views of the same object; breadcrumbs when depth is more than two.