Use the live component library before creating another page-specific pattern.
The production component library is an authorized administrator screen, not a static screenshot gallery. It exercises the same shared primitives used by academy operations and learner workflows.
Live component library
Open /settings/design-system as a user with settings access. The library demonstrates page headers, KPI cards, charts, activity timelines, stat lists, tables, status badges, empty states, rich text, inputs, selectors, uploads, repeaters, and responsive states as working Blade components.
| Source | What it provides | Use it for |
|---|---|---|
resources/views/components/ | Shared Blade primitives and component contracts. | All reusable content, forms, feedback, table, card, and state patterns. |
public/assets/css/ui/kpi/ | KPI layout and interaction styling. | Action-oriented operational metrics. |
public/assets/css/ui/charts/ | Shared chart presentation assets. | Trends with a clear operational action or explanation. |
usage/ | Usage examples for KPI, charts, activity, tables, tabs, and notification patterns. | Reference when composing a shared component or extending the library. |
Composition rules
Use shared primitives
- Start with page header, panel, toolbar, status, empty state, and feedback primitives.
- Use KPI/charts only when they clarify a decision or lead to an action.
- Keep tables, editors, assessments, calendars, and boards visually quiet and dense enough for work.
Protect accessibility
- Preserve visible focus, semantic headings, announcements, keyboard alternatives, and 44px mobile touch targets.
- Respect dark theme and reduced-motion preferences.
- Design loading, zero-data, filtered-empty, validation, permission, network-error, destructive, success, and archived states together.
Review checklist
- New UI uses existing component contracts before introducing a dedicated component.
- New color values map to documented
--app-*variables; tenant accents remain sanitized. - No route enabled by a product release mixes legacy presentation assets with product primitives.
- The live Design System screen is updated when a reusable component contract changes.