@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. |
| AuthorLink | Linked author byline chip used in article cards. |
| NavCard | Emoji-decorated navigation card with optional badge. |
| Auth & Profile | |
| LoginForm | Sign-in and registration form with Google OAuth and email/password. |
| ProfileInfoCard | User profile card with avatar slot, inline name editing, roles, and verified badge. |
| RefreshButton | Icon button that triggers a data reload with a loading spinner. |
| Content & Forms | |
| ContactForm | Client-side contact enquiry form with inline feedback. |
| PolicyBody | Renders a structured legal document from PolicySectionData[]. |
| Utilities | |
| ThemeProvider | Context provider for light/dark theme with useTheme() hook. |
| CookieConsent | GDPR cookie consent banner with localStorage persistence. |
| AdsenseScript | Google AdSense script that respects cookie consent before loading. |