Components
150 components across 4 categories
atoms
Back to overviewAvatar
Circular user avatar with gradient background and initials. Sizes: sm (28px), md (40px), lg (56px).
Badge
Numeric count badge — used for notification counts and nav item counts. Red pill, 20px min, 10px font, 700 weight.
Barcode
QR or Code-128 barcode display — SVG-rendered for crisp scaling. Used in TicketCard and OrderConfirmation. 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 (32px), md (40px), lg (48px).
Checkbox
Binary checkbox with label. 18×18 box, 2px teal border, teal-50 fill when checked. Indeterminate state supported.
Chip
Selectable filter chip — multi-select group. Like a small Pill but with optional leading icon and selected/unselected visual states.
ColorSwatch
Color preview block — 24×24 rounded square with hex/RGB tooltip. Used in design system docs and theme editor.
Divider
Horizontal 1px divider in --c-border-light. Used inside stat cards, table rows, side cards.
Icon
Inline SVG icon library — 21 standard icons used across admin. Always aria-hidden — paired with text or aria-label from parent.
IconButton
40×40 circular icon-only button. Used in header for notifications, settings, theme toggle. Dark variant in light mode (#1A2332 bg / white fg), neutral in dark mode.
Input
Text input with label, helper, error, and disabled states. Border darkens and adds glow on focus. Required for all forms.
InputOTP
Multi-digit OTP input. Auto-advance between digits, paste support.
InputPhone
Phone number input with country code selector. Format validation.
Kbd
Keyboard key indicator — 20×20 with monospace font, 1px border, 4px radius. Used in shortcuts hints.
Listbox
Keyboard-navigable listbox with single/multi-select, option groups, and custom rendering. Follows WAI-ARIA Listbox pattern (1.2). Used internally by Select and TimePicker.
Logo
Original ePassLive logo with 4 elements: QR Code (mode-adaptive), Code Scanner Frame (mode-adaptive), Teal 'e' lettermark (brand-locked), PSSLIVE wordmark (mode-adaptive). Theme-aware via --logo-fg token.
Pill
Toggle pill used in tab groups. Active state has white background + card shadow. Pressed state mirrors selected tab.
PriceTag
Formatted price — locale-aware currency display. Sizes: sm/md/lg. Variants: default / strikethrough / from-prefix.
Radio
Radio button for a radio group. Wrapped by RadioGroup which manages arrow-key navigation between siblings.
SeasonPassBadge
Season pass membership badge — shows pass type, validity dates, and member tier. Used in user profile and event pages. Critical UX pattern: season pass.
Skeleton
Loading skeleton — radius matched to whatever it's skeletonizing. Use while Server Components fetch data.
Spinner
Loading indicator — teal ring with rotating segment. Sizes: sm (16), md (24), lg (40). aria-label or aria-labelledby required when no visible label.
Switch
Toggle switch — 36×20 pill, teal when on, neutral when off. role='switch' with aria-checked.
Tag
Removable label chip — used in filter bars, multi-select displays, taxonomy. Has a × button with aria-label='Remove {label}'.
Textarea
Multi-line text input. Auto-grows, char counter, helper text, error state. Same label/error/required contract as Input.
molecules
Back to overviewAccessibilitySeatSelector
Accessibility seating options selector — wheelchair accessible, companion seat, aisle access, hearing loop, and visual aid seats. Critical UX pattern: accessibility seating.
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 — 8px colored dot + 12px text with bold entity name + 10px muted relative time. Live region: new items announced politely to screen readers.
Alert
Inline alert (success, error, warning, info) — distinct from Banner. Used for form validation, system messages.
ArtistCard
Performer/artist card — circular image, name, role, follow button. Used in event detail and artist pages.
AvatarGroup
Stacked avatar list — 3+ avatars overlapping by -8px, with overflow count. Used for attendees, collaborators, team members.
BadgeGroup
Displays multiple badges as a cluster. Handles overflow with '+N' indicator.
Banner
Full-width announcement bar — 4 variants (info/success/warning/error). Dismissible, with optional CTA. role='region' aria-label='Announcement'.
BreadcrumbBar
Page-level breadcrumb — same as core Breadcrumbs but with storefront visual treatment (larger spacing).
Breadcrumbs
Hierarchical path indicator with separator. Last item is current page (aria-current='page').
ButtonGroup
Segmented button cluster. Visually connected buttons for related actions.
CartItem
Single cart line — event thumbnail, title, tier, date, quantity stepper, line total, remove button. Hover-only remove on desktop.
CategoryFilter
Horizontal scrollable row of category chips — Music, Sports, Comedy, Theater, Festivals, Family. Multi-select for filtering event grids.
ColorPicker
Per-event brand color picker (sets CSS custom properties). Replaces legacy color-picker.xsl.
Combobox
Searchable select with type-ahead. Combines input with dropdown list.
CopyButton
Button that copies a value to clipboard and shows a brief checkmark + 'Copied' feedback. Uses navigator.clipboard API.
DateBadge
Square date label — 16px/800 day on top, 9px/700 uppercase month below. Positioned absolute top-left of EventCard thumbnail. White bg + card shadow.
DatePicker
Calendar date picker with 24h time support. Replaces jQuery UI datepicker.
DateRangePicker
Date range picker — two-month calendar view, range selection, presets (Today, This Weekend, This Month). Keyboard navigation between dates.
Dropdown
Menu attached to a trigger. Renders items with role='menuitem'. Closes on Escape, click outside, item select. Keyboard arrow navigation.
EmptyState
Reusable empty state — illustration slot + title + description + optional CTA. Used in every list, table, search result.
EventCard
Upcoming event preview card — 240px wide. Top: 120px gradient thumbnail with absolute date badge. Body: 13px/700 event name + 11px muted location with map pin.
EventCardPublic
Public event card — 320px wide. Top: 200px image with hover scale. Body: date (large) + title + venue + price-from + Buy button. Larger and more visual than admin EventCard.
FileUpload
Drop zone + file input. Drag-over visual, file list with progress, type/size validation, preview thumbnails.
FilterBar
Horizontal filter bar — search input + filter chips + sort + view toggle. Used on every admin list page.
GiftTicketCard
Gift ticket preview card — recipient name, message preview, event details, and gift wrap indicator. Used in checkout and order confirmation. Critical UX pattern: gift ticket.
HeroSearch
Large prominent search bar inside hero — 56px height, 2-segment input (what + where), date picker, search button. Mobile: stacks vertically.
LanguageSwitcher
EN/FR bilingual toggle with instant language switch. Full i18n on all pages.
MiniStat
Compact label + value row — 12px label on left, 14px/700 value on right, with 1px bottom border. Used in Ticket Sales Breakdown side card.
NavGroup
Grouped nav items with an uppercase 10px label above (e.g. 'Main', 'Sales', 'Operations'). Bounded to ≤4 items per group (NASA Rule 2).
NavItem
Sidebar navigation item — 20px icon + label + optional badge. Active state shows 4px teal accent on left edge, white background, and teal-700 text.
Newsletter
Newsletter signup — email input + submit + success state. Used in footer and dedicated landing blocks. Validates email format.
Notification
Notification item — avatar/icon + title + body + timestamp + unread dot. Used in notification dropdown and feed.
OrderSummary
Compact order summary — line items + total only. Used in cart drawer and confirmation.
Pagination
Page number navigator with prev/next. URL-driven (controlled). Compact mode for tables, full mode for grids.
PaymentMethod
Payment method row — radio + icon + label + description + extra info. Used in CheckoutSummary payment selector.
ProgressBar
Horizontal progress indicator — 6px height, 3px radius. Fill is teal→blue gradient. ARIA progressbar with valuenow/min/max.
PromoCodeInput
Promo code field — input + Apply button. Shows success (with code pill + remove) or error message. Live region.
PromoCodeValidator
Promo code input with real-time validation — shows discount amount, expiry, and terms. Used in checkout. Preserves legacy promo system.
QuickBuyBar
Sticky quick-buy bar at bottom of event page — event name, date, price from, and 'Buy Now' CTA. Appears on scroll past hero. Critical UX pattern: 3-click purchase flow.
Rating
Star rating display + input. Read-only (display) or interactive (input). 5 stars by default, half-stars supported.
RefundStatusTracker
Refund request status tracker — shows current stage, estimated timeline, and next steps. Used in order history. Preserves legacy refund flow.
RichTextEditor
Rich text editor for event descriptions. Replaces TinyMCE. TipTap/Lexical wrapper.
SearchPill
307×40 search input with leading magnifier icon. 30px border-radius (pill shape). Border darkens to teal + 4px glow on focus. Used in admin header as the global search.
SeatMapLegend
Seat map color legend — shows price tiers with colored swatches, availability status, and accessibility icons. Critical UX pattern: seat map visualization.
SeatPicker
Read-only seat picker for the admin's preview of what customers will see. Same data shape as SeatMap, but no edit tools.
Select
Native-feel select built on a button + popover. Search, multi-select, async load. Combobox pattern (WAI-ARIA 1.2).
SkipLink
Skip-to-main-content link. Hidden off-screen at top:-40px, slides down on focus. WCAG 2.4.1 Bypass Blocks.
Slider
Range slider — single or dual thumb. 4px track, 20px thumb. Keyboard arrow keys, ARIA slider pattern.
StatCard
KPI metric card — 40×40 colored icon + trend pill + 28px/800 value + 12px muted label. White card with 1px border, hover lift -2px + card shadow.
StatusPill
Status indicator pill — 11px/600, 20px radius. Variants: confirmed (green), pending (amber), cancelled (red). 6px dot prefix in current color.
Stepper
Horizontal step indicator — 3-6 steps with state (complete/current/upcoming). Used in checkout, multi-step forms, onboarding.
Tabs
Horizontal tab group with underline indicator. WAI-ARIA tabs pattern: role='tablist', roving tabindex, ArrowLeft/Right to navigate.
ThemeToggle
Moon-icon IconButton that toggles data-theme between 'light' and 'dark' on documentElement. Persists to localStorage. aria-pressed reflects state.
TicketCard
Single ticket — barcode (Barcode component) + event title + date + venue + seat/tier + status pill. Tappable to open ticket detail with full barcode.
TicketSelector
Inline quantity stepper — − / number / +. Used in TicketTier and other contexts. Disabled when min/max reached.
TicketTier
Single ticket tier — name, description, price, availability indicator, quantity stepper. Disabled when sold out.
TimePicker
Time picker (24h format), separate from date. Used for event start time and doors time.
Toast
Ephemeral notification — 4 variants (success/info/warning/error). Auto-dismiss 5s, queueable. Uses aria-live='polite' container.
Tooltip
Hover/focus popover with 200ms delay. Renders as <span role='tooltip'> with aria-describedby on the trigger.
UserProfile
Header user profile — 40px avatar + name (13px/600) + role (11px muted) + chevron dropdown indicator. Renders as <button> with aria-haspopup='menu' and aria-expanded.
VenueCard
Venue preview — image, name, address, capacity, link to venue page. Static, server-rendered.
WaitlistJoinForm
Waitlist join form — email input, notification preference, and join button. For sold-out events. Preserves legacy waitlist functionality.
WillCallPicker
Will-call ticket pickup selector — choose pickup location, date, and time slot. Shows ID requirements. Critical UX pattern: will-call pickup.
organisms
Back to overviewAccentCard
Dark accent card variant — always #0A0A0A background regardless of theme. Used for Door Revenue. White text, 32px/800 value, split stat row with teal and amber sub-values.
ActivityList
Live region wrapper for ActivityItem children. aria-live='polite' so new items are announced without interrupting. 12px gap between items.
AdminFooter
Site footer with copyright left, link group right (Help / Privacy / Terms). 12px text, muted color, separated by 16px gap.
AlertGroup
Stacked alerts container. Manages multiple alerts with auto-dismiss and queue.
AuthForm
Auth form — supports sign-in, sign-up, forgot-password, reset-password, verify-email. Email + password + optional name/phone. OAuth buttons (Google, Apple, Facebook).
BookingsTable
Recent bookings data table — 5 columns (Customer, Event, Amount, Status, Date). 11px uppercase header. Hover row tint to teal-10. Caption is screen-reader-only.
Calendar
Month/date picker grid. Full calendar with navigation, selection, and disabled dates.
Carousel
Responsive event carousel for homepage. Replaces Slick carousel. CSS scroll-snap based.
CartDrawer
Slide-in cart drawer from right. List of CartItems + OrderSummary + Checkout CTA. Empty state with browse-events link. Open/close animation.
CartSummary
Cart summary bar with quantity, total, BUY button, and 10-minute reservation timer. Visual urgency states (green → yellow → red).
Chart
Chart wrapper for line, bar, donut, sparkline. Recharts/Victory integration point.
ChartCard
Card with header (title + Pill-group range selector) + area chart visualization + day labels. Used for Revenue Overview.
CheckinList
Real-time check-in feed — last 50 scans with attendee name, ticket tier, scan result, timestamp. Subscribes to Medusa events for live updates.
CheckoutSummary
Checkout summary panel — line items (tier × qty), fees, taxes, total, promo code input, payment methods, Place Order button. Sticky on desktop.
CommandMenu
Cmd+K command palette — searchable list of actions/navigation. Modal-style, debounced search, ⌘K to open, Esc to close, arrow keys to navigate.
DataTable
Generic data table with column config, sorting, row selection, pagination. Foundation for BookingsTable, TierTable, UserTable, PromoTable.
Drawer
Side panel overlay. Slides in from left/right for navigation or content.
EventComparisonTable
Event comparison table — side-by-side comparison of multiple events showing date, venue, price range, and availability. Used for festival multi-event booking. Preserves legacy comparison feature.
EventDetail
Admin event detail header — event image, title, status pill, key metadata (date/venue/capacity), action buttons (edit/publish/cancel).
EventGrid
Responsive event grid — 1/2/3/4 columns at sm/md/lg/xl. Same shape across all event listing pages. Loading state shows Skeleton grid.
EventHero
Large event hero on detail page — 16:9 image, overlay gradient, title, date pill, venue, share/save buttons. Below: tabbed info (Details, Venue, Reviews, FAQ).
EventList
Vertical list of events — larger cards, 1 per row, more metadata. For list view toggle.
EventsRow
Horizontal scroll row of EventCards with scroll-snap. 240px cards, 16px gap. Hidden scrollbar styled to 4px thumb.
FAQ
FAQ accordion — grouped questions with optional categories. Single or multi-expand. Schema.org FAQPage JSON-LD for SEO.
FeaturedEvents
Carousel of featured events — 1 large featured + 3 small. Auto-advance every 6s, pauses on hover. Swipeable on mobile.
Footer
Public site footer — multi-column: Brand + tagline, Browse links, Help links, Social icons, Newsletter signup, Legal. Mobile: accordion columns.
FormLayout
Form scaffold — title + description + sections (each with heading + fields) + footer (save/cancel). Used on every admin create/edit page.
GroupBookingForm
Group booking form — quantity selector, seat preference, contact details, and special requests. For groups of 10+. Critical UX pattern: group booking.
Header
Admin page header — 80px min-height, 24px vertical / 16px horizontal padding. Left: title (24px/600) + subtitle. Right: SearchPill + IconButton stack + UserProfile.
Hero
Full-bleed marketing hero — background image/video + gradient overlay + headline + subtitle + HeroSearch + featured badges. Used on /, /landing/* pages.
Menu
Dropdown command list. Context menu or navigation menu with items, separators, and submenus.
MerchCard
Merchandise item card with image, price, quantity selector. Renders in merch tab of event details.
MobileNav
Mobile drawer — full-height slide-in from left. Logo + nav links + user section. Backdrop closes drawer. Focus trap.
Modal
Dialog overlay with backdrop. Sizes: sm (400px), md (560px), lg (720px), xl (960px). Focus trap, Escape to close, scroll lock, ARIA dialog pattern.
OrderConfirmation
Post-purchase confirmation — success state, order number, ticket cards, calendar add buttons, share, view-orders CTA. Generates email + adds to wallet.
PackageCard
Atomic package display card — package = single expandable card, NOT individual tickets. 'See the tickets included in this Package' expandable section. Must render as atomic unit.
PromoTable
Promo code management table — code, discount type, value, usage, expiry, status. Bulk actions (activate/deactivate/delete).
QRScanner
Live camera-based QR scanner for ticket check-in. Uses BarcodeDetector API with manual entry fallback. Audio + haptic feedback on scan.
SearchOverlay
Full-screen search overlay — large input + recent searches + suggested categories + trending events. Cmd+K shortcut to open. Mobile: takes full viewport.
SeatMap
Interactive seat map editor — drag, select, color by tier, zoom/pan. SVG-based with hit testing. Server-driven initial state, optimistic updates.
Sidebar
Admin sidebar — 247px wide, sticky, 100vh-height with vertical scroll. Contains Logo + NavGroups. White bg in light mode, #141414 in dark mode. 1px border, 16px outer radius. Hidden on mobile (≤800px).
SideCard
Generic side panel card — 16px padding, white bg, 1px border, 16px radius. Contains: title (13px/700) + body. Used for Ticket Sales Breakdown, Recent Activity.
SocialProof
Social proof — testimonial cards carousel or grid. Quote + author + role + avatar. Optional logo wall.
StatGrid
4-up responsive KPI grid — 16px gap, equal columns. Collapses to 2-col on tablet (≤1100px) and 1-col on mobile (≤800px).
StatTable
Multi-section stats table with totals, subtotals per product type. Thuwan-mandated format: Total Available → Ticket Counts → Sales → ePassLive Fees → Transfer to Bank Account.
TicketTierList
Stack of TicketTier cards with shared quantity state. On selection, shows total in sticky footer with Continue button.
TicketTransferModal
Ticket transfer modal — enter recipient email, select tickets to transfer, add message, and confirm. Used from order history. Preserves legacy transfer flow.
TicketWallet
User's saved tickets — list of TicketCards, grouped by upcoming/past. Empty state for new users. Filter by event type.
TierTable
Ticket tier management table — name, price, capacity, sold, status, actions (edit/archive). Inline editing for price/capacity.
TopNav
Public site top navigation — sticky 64px, Logo + nav links + search + cart + user. Transparent → solid on scroll. Mobile: collapses to hamburger.
UserTable
User management table — name, email, role, last active, status, actions. Inline role editing for admins only.
VenueAccessMap
Venue accessibility map — shows entrance locations, wheelchair routes, accessible restrooms, and parking. Interactive SVG map. Preserves legacy venue info.
VenueMap
Google Maps venue display. API key via env var, not hardcoded. Replaces legacy google-map.xsl.
templates
Back to overviewAdminShell
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
Main dashboard body — main landmark + 70/30 split (main-col / side-col), 24px section gap, 24px padding, 16px radius. Side col collapses below main on tablet (≤1100px).
EventDetailPublic
Event detail page layout — EventHero + (Description + Artists + Venue + Reviews + FAQ) on left, sticky TicketTierList + Buy CTA on right.
PDFTemplate
PDF generation template (ticket, refund, payment, monthly). Layout spec only — actual rendering via react-pdf/Puppeteer.
SettingsLayout
Two-column settings layout — left vertical nav (Account, Organization, Billing, Security, Integrations), right content area. Used in /admin/settings.
StorefrontShell
Outer shell — vertical layout: TopNav + main + Footer. Sticky nav, content flex-1, footer pinned. Mobile: MobileNav replaces TopNav on <768px.