Use tabs for compact content grouping inside docs, settings, or dashboard subviews where full routing would be excessive.
Core components before page composition
These shared primitives are implemented as reusable class contracts in src/styles/components.css, interaction hooks in src/main.js, and source-of-truth snippets under src/components/core.
Buttons
Primary, secondary, ghost, danger, size, block, disabled, and busy states all share one button contract.
Badges
Status and context labels stay compact, semantic, and consistent across dashboard and marketing surfaces.
Primary Neutral Success Warning Danger
Alerts
Alerts cover info, success, warning, and danger messaging without breaking page rhythm.
Information
Use info alerts for lightweight onboarding, guidance, or contextual notes.
Saved successfully
Success alerts work well after publishing, billing updates, and completed setup tasks.
Review before launch
Use warning alerts for soft blockers that still allow the user to recover quickly.
Action required
Reserve danger alerts for real blockers like failed billing or missing permissions.
Input + form controls
Text fields, selects, textareas, validation, and check controls use one shared form system.
Use the agency or client name shown in marketing and account settings.
Enter a valid support address before publishing.
Tabs
Tabs support shared styling, ARIA linking, disabled states, and Arrow/Home/End keyboard navigation.
The shared script manages `aria-selected`, generated IDs, hidden panels, and disabled-tab skipping.
Disabled tabs remain visible for roadmap context without becoming active keyboard or click targets.
Basic card
Card shell, header, content, and footer spacing create a stable composition baseline.
Reusable
Starter content card
Use the same structure for feature blocks, settings panels, and compact dashboard modules.
Keep the shell, spacing, and heading treatment consistent to preserve the system feel.
Table shell
Tables now include a shared toolbar, action row, density, and empty-row treatment.
| Project | Status | Owner |
|---|---|---|
| Apollo Revamp | On track | Daniel |
| Northwind Rebrand | Needs review | Avery |
| No archived projects yet. | ||
Modal
Modals support open/close triggers, Escape, overlay dismissal, focus return, and focus trapping.
Dropdown
Dropdowns support shared actions, outside-click dismissal, Escape, and Arrow/Home/End navigation.
Tooltip
Tooltips provide short helper copy on hover or focus without adding heavier interaction state.
Short helper copy for icon buttons and dense controls. Bottom-aligned tooltip example.
Toast
Toasts provide brief, dismissible feedback and optionally auto-dismiss through `data-toast-duration`.
Project saved
Use toasts for lightweight follow-up confirmation after brief actions.
Trial expires soon
This example auto-dismisses after 5 seconds via data-toast-duration.
Pagination
Pagination uses one spacing and selected-state treatment across docs, tables, and listings.