# components.html showcase template The single anchored page that previews every component in every state. This IS the review artifact for the `components` skill — reviewers scan through and either sign off or list specific tweaks. ## Outer shape ```html Acme — Component library

Actions

Buttons, button groups, action-triggering elements.

``` ## Showcase cell pattern Each cell shows one component variant or state group, plus the HTML snippet a reviewer or implementer can copy: ```html

Primary button — all states

<button class="btn btn-primary">Save</button>
``` For pseudo-class states (`:hover`, `:focus-visible`) that don't trigger without interaction, add CSS that mirrors the state when `data-state` matches: ```css .demo .btn[data-state="hover"] { /* same rules as .btn:hover */ } .demo .btn[data-state="focus"] { /* same rules as .btn:focus-visible */ } ``` This is the only place where states are "fake-rendered" — reviewers need to see what hover/focus look like without manually triggering them. ## Section grouping Always include these sections in this order (skip any whose components weren't selected in Phase 2): 1. **Actions** — buttons, button groups 2. **Forms** — fields, inputs, selects, checkboxes, radios, switches 3. **Surfaces** — cards, panels, dividers 4. **Feedback** — alerts, toasts, empty states 5. **Navigation** — nav-bar, tabs, breadcrumb, dropdowns, menus 6. **Data display** — tables, lists, badges, tags, avatars 7. **Overlays** — modals, popovers, tooltips, drawers 8. **Indicators** — spinners, progress, skeletons 9. **Project-unique** — every Phase 3 component, named and explained The project-unique section gets extra prose: each component shows its name, purpose, anatomy, and at least one full example. These are the components that don't have a generic mental model, so document them clearly. ## State-grid pattern for variant-heavy components When a component has many variants × states (buttons especially), use a state grid: ```html

Button matrix — variants × sizes

``` ## Theme toggle If `tokens.css` uses `[data-theme="dark"]` for dark mode, include the toggle button (shown in the outer shape above). If it uses `@media (prefers-color-scheme: dark)`, the toggle is moot — note in the nav: "Switch your OS theme to preview dark mode." ## Anti-patterns for the showcase page - **Don't restyle components in the showcase CSS.** The showcase styles only the showcase chrome (nav, grid, cells). Components style themselves from `components.css`. If the showcase needs an override, the component is wrong. - **Don't lazy-load or hide variants.** Every component, every state, on one scrollable page. The whole point is at-a-glance review. - **Don't fake interactions with JavaScript.** Real native interactions (modal open/close, dropdown toggle) are fine and useful. Faking `:hover` with JS isn't — use the `data-state` CSS-mirror pattern instead. - **Don't forget the HTML snippet.** The `
` block is the
  implementer's copy-paste source. Skipping it forces them to view-source
  on the demo cell.