@ann/ui
Ann Design System
Shared UI primitives for anntech.dev and related Ann properties. Click any component to see live editable demos.
| Layout | |
| Hero | Full-width navy hero section with headline, subline, and CTA buttons. |
| CTABanner | Call-to-action banner with headline and a button. |
| Footer | Site footer with brand, copyright, and nav links. |
| PageBody | Centred content wrapper with configurable max-width. |
| PageHeader | Page-level h1 with optional subtitle. |
| SectionHeader | Section h2 with optional centering. |
| Primitives | |
| Badge | Inline status label with five semantic colour variants. |
| Button | Action trigger with variants, sizes, and loading state. |
| Card | Bordered container with padding and optional muted background. |
| AppearanceCard | Theme toggle card for profile pages. |
| ErrorBox | Inline error display with a title and message. |
| Input & Label | Controlled text input with accessible label. |
| Skeleton | Animated loading placeholder. |
| Data Display | |
| Table | Primitive table components: Shell, Head, Body, Row, Cell. |
| PaginatedTable | Table with built-in pagination bar, top/bottom/both. |
| Navigation | |
| Navbar | Fixed top navigation bar with logo, links, CTA, and auth area with avatar dropdown. |
| SidebarNav | Vertical nav sidebar with grouped items, active state, and brand header. |
| Breadcrumb | Navigation trail with linked ancestors. |
| Pagination | Page controls with size selector and numbered buttons. |