Components
231 components across 4 categories
atoms
View all 52Avatar
Circular user avatar with initials fallback and optional image. Sizes: sm (32px), md (40px), lg (56px), xl (80px).
Badge
Numeric count badge for notification and nav counts. Count-based API (number or max+), never children. Five semantic variants on ADR-027 tint/fg pairs — WCAG 2.2 AA (≥4.5:1) in light and dark themes.
Barcode
QR (ISO/IEC 18004) or Code-128 B (ISO/IEC 15417) symbol — SVG-rendered for crisp scaling. Rendered on every issued ticket and at order lookup via the storefront QrCode facade (ConfirmationView, OrderLookupForm). Decorative when paired with text; meaningful when sole identifier.
Button
Primary interactive button — variants: primary (teal CTA), secondary (outlined), ghost (text-only), danger (destructive). Sizes: sm/md/lg all enforce WCAG 2.5.5 44px tap-min (var(--ep-tap-min)); size changes padding and font-size, not height.
Caption
Small muted caption text (ep-xs, text-muted) for figure captions, helper lines and secondary annotations. Polymorphic via `as`.
Checkbox
Tri-state checkbox with label. 18×18 box, 2px teal border, solid teal fill with a white check glyph when checked. Indeterminate state supported. Use for selections; use Switch for immediate on/off settings.
Surface
The generic bordered, token-backed box that domain cards and panels compose. Use instead of hand-writing rounded/border/background utilities at the call site; carries no content structure of its own.
Chip
Selectable filter chip — multi-select group. Like a small Pill but with optional leading icon and selected/unselected visual states.
molecules
View all 90SelectionCard
Shows the entity a picker has selected, with a divided action rail on the trailing edge. Use when a chosen value needs confirming (two venues can share a name) or acting on (edit, clear). Composes Surface.
Listbox
Inline ARIA selection widget with full keyboard support (WAI-ARIA Listbox pattern 1.2). Single and multiple selection modes, option groups, and custom option rendering.
RadioGroup
Radio group container — wraps Radio atoms with shared name, controlled value, roving tabindex, and arrow-key navigation. Provides role="radiogroup" semantics.
SearchSelect
Async typeahead search input with debounced server-side querying, optional inline create, keyboard navigation, and ARIA combobox semantics. Generic — takes a fetcher callback, not a hardcoded endpoint.
ValuePropsStrip
Horizontal strip of 3-4 value proposition items with icon, heading, and description. Used in storefront landing pages to communicate trust signals (secure payment, instant delivery, etc.).
Accordion
Vertical stack of expandable sections. Single or multi-expand modes. Each header is a button with aria-expanded.
ActivityItem
Activity feed row — a semantic <li> with an 8px tone dot, a bold actor name, action text and a muted relative time in a <time> element. Consumers own the surrounding list (and any aria-live region).
Alert
Inline alert (success, error, warning, info) — distinct from Banner. Used for form validation, system messages.
organisms
View all 83Banner
Full-width announcement bar — 5 variants (info/success/warning/error/solid). Dismissible, with optional CTA. role='region' aria-labelledby={titleId}. The `solid` variant is brand-aligned (bg-ep-btn-primary + white text + animated icon + CTA button) for high-visibility system states (admin impersonation, maintenance mode). Composes the Alert molecule's ALERT_VARIANT_STYLES contract for the tinted variants (Alert is the single source of truth; Wave 3 Tier-1 L4-M3) and auto-adapts in dark mode.
FileUpload
Drag-and-drop file field — dashed drop zone with click AND keyboard paths (Enter/Space), controlled (value) or uncontrolled file list showing name + size + Remove, and accept/maxSize/maxFiles client-side validation surfaced via onError. The organism owns zero network calls — onChange hands the raw File[] to the caller. Built-in zone copy is EN/FR via locale (default en). Dormant organism (no consumer yet).
AccentCard
Theme-aware accent CTA card — light bg-ep-surface-card surface with a decorative left strip in one of the four ADR-031 brand hues (teal/indigo/amber/pink), optional eyebrow/body/CTA (Phosphor arrow, SideCard family norm), and optional promotion to a keyboard-activated button via onClick. Dormant organism (ADR-035) — zero consumers.
ActivityList
Activity feed section — labelled card with heading, optional caption and rows rendered by the ActivityItem molecule (kind → semantic tone + label). Empty state is visible muted text; no aria-live is set by the component.
AdminFooter
Slim admin chrome footer: copyright line on the left, inline link row on the right. Uses text-ep-xs + text-ep-text-muted for legal text, border-ep-border-subtle top border, gap-4 spacing. All colors via DS tokens (no raw hex).
AlertGroup
Stacked alert list composing the Alert molecule per alert. Stateless render loop over the specs — dismissal is per-alert; no queue, auto-dismiss, or max-visible logic.
AuthForm
Self-contained auth card form for the three auth modes (sign-in / sign-up / forgot). Field set switches per mode — fullName only on sign-up, password hidden on forgot; labels and copy switch per locale (FR default, EN via locale prop, SeatMapLegend inline-i18n precedent). onSubmit receives { email, password?, fullName? } after native validation; secondaryAction renders the footer link. Password-manager autoComplete hints on every field.
BookingsTable
Producer bookings list — 7 columns (buyer+email stacked, event, venue, date, tickets, total, status pill). Composes the DataTable organism with a BookingRow column config (Wave-3 L8c). Five semantic-tint status pills (confirmed / pending / cancelled / refunded / checked-in). Bilingual via the `locale` prop (default `"fr"`). Caption is screen-reader-only by default. i18n: organism owns zero message-catalog keys — inline bilingual literals (Wave-3 W4 / VenueAccessMap / ActivityList precedent); caller-localize `rows`.
templates
View all 6AdminShell
Outer shell — horizontal layout: Sidebar (247px) + Content (flex). 12px gap, 12px padding around. Min-height 100vh. Sticky sidebar.
AuthLayout
Auth page layout — split-screen. Left: brand panel with marketing image + tagline. Right: form container (40% width). Mobile: full-width form.
DashboardBody
Authenticated dashboard scaffold — greeting header (period caption + H1), KPI strip (1 col mobile → 2 cols sm → 4 cols lg, each tile with label/value/optional delta chip), 2fr/1fr main+side grid (side rail collapses below on <lg) and optional activity feed section. Root is a <main role="main" id="main"> skip-link target; every section landmark is labelled via the bilingual SECTION_LABELS map (locale prop, fr default).
EventDetailPublic
Event detail page layout — EventHero + (Description + Artists + Venue + Reviews + FAQ) on left, sticky TicketTierList + Buy CTA on right.
PDFTemplate
Printable document shell (ticket, refund, payment receipt, monthly statement). Pure presentational React rendered to static markup — `renderToStaticMarkup` for a server PDF pipeline, or the browser print dialog as-is. Print template: fixed theme, A4 width, no responsive/dark axes.
SettingsLayout
Two-column settings shell — vertical section rail + content panel; sections are caller-defined SettingsSection entries (bounded 3-8, NASA Rule 2), not a fixed list. Left rail is a <nav aria-label> landmark labelled via the bilingual NAV_LABELS map (locale prop, fr default); the active entry carries aria-current="page". Implemented and exported from the barrel, but zero current adoption as of 2026-09-14.