Quick Start

Build your first ePassLive page — a Storefront event card — in ten minutes.

Goal

Render a fully accessible event card with the ePassLive top nav and footer, using the StorefrontShell template.

Step 1 — Create the route

mkdir -p app/events/[slug]
touch app/events/[slug]/page.tsx

Step 2 — Use the shell template

import { StorefrontShell, EventCard } from '@epasslive/design-system'
import type { ReactElement } from 'react'

export default function EventPage({
  params,
}: {
  params: { slug: string }
}): ReactElement {
  return (
    <StorefrontShell
      skipTargetId="storefront-main"
      skipLabel={locale === 'fr' ? 'Aller au contenu principal' : 'Skip to main content'}
      topNav={<SiteHeader />}
      main={
        <EventCard
          id="evt-aurora-2026"
          title="Aurora Sound Festival 2026"
          image={{
            url: '/events/aurora-hero.jpg',
            alt: 'Aurora Sound Festival main stage at dusk',
          }}
          date={{ day: '12', month: 'AUG', year: '2026', iso: '2026-08-12T19:00' }}
          venue={{ name: 'Brooklyn Mirage', city: 'Brooklyn' }}
          priceFrom={89}
          currency="CAD"
          href={`/events/${params.slug}`}
        />
      }
      footer={<SiteFooter />}
    />
  )
}

Step 3 — Run dev server

pnpm dev
# → http://localhost:3000/events/aurora-2026

Pro tip

Every component in this library can be copy-pasted from the catalog pages and used as a Server Component. Only add "use client" when the component uses interactivity (state, refs, effects).