StorefrontShell

Usage

StorefrontShell is the frame, not the page: fill the topNav and footer slots with the SiteHeader / SiteFooter organisms and render the route inside main. Always pass locale matching the active app language, and skipTargetId="storefront-main" when mounting inside the root layout (see the two-skip-links trap in the docs).

import { StorefrontShell } from '@epasslive/design-system'
import { SiteHeader } from '@/components/layout/SiteHeader'
import { SiteFooter } from '@/components/layout/SiteFooter'

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Promise<{ locale: string }>
}) {
  const { locale } = await params
  const shellLocale: 'en' | 'fr' = locale as 'en' | 'fr'

  return (
    <StorefrontShell
      locale={shellLocale}
      skipTargetId="storefront-main"
      topNav={<SiteHeader />}
      main={children}
      footer={<SiteFooter />}
    />
  )
}

Composition notes

The slots are plain ReactNode — the shell imposes no markup on them, so headers and footers stay independently swappable. The footer pins to the bottom on short pages (flex-1 on the main region), announcementBar renders above the nav when present, and locale drives only the skip-link label. Don't use this shell for account or admin surfaces — AccountShell and AdminLayout are their respective frames.

Accessibility

Skip-to-content link (WCAG 2.4.1 Bypass Blocks): visually hidden until focused (sr-only focus:not-sr-only), fixed when visible, labelled in the active locale, and targeting the main region's id — the <main role="main"> landmark is focusable via tabIndex={-1} so the focus handoff lands without a visible ring trap (WCAG 2.4.3). The skip link surfaces in the interactive token colors (bg-ep-btn-primary + text-ep-text-inverse — 5.70:1 in both themes). Colors come from tokens, which meet AA contrast in both themes.

Props