form shell

the canonical klera form / onboarding layout. centered stage (max 720px), header band with progress, sticky footer that content scrolls behind, and a slide-in dev-mode journey side nav.

different shape from DashboardShell. dashboard is a 4-area grid (brand / topnav / sidenav / stage); form-shell is a single column with optional overlay nav. public users see a clean full-screen experience with no visible side nav.

→ open the standalone interactive demo (no design-app chrome — pure FormShell at full viewport). the dev-nav trigger is the invisible button at the top-left; focus it with Tab to see it. or visit with ?devnav=1 to reveal the journey on load.

import from @klera/ui/components/forms/FormShell

API: <FormShell brand? progress journey? children footerNav? headerActions? mobileMainQuestion? />. each slot is a ReactNode. mounts the DevNavTrigger automatically (top-left, opacity 0, visible on focus).

Reveal logic: the journey panel is hidden by default. it slides in when the user (a) clicks the hidden trigger, (b) lands with ?devnav=1 in the URL, or (c) has localStorage["klera.devnav"] = "1" persisted from a prior session. ?devnav=0 force-hides for screenshots. NEXT_PUBLIC_KLERA_DEVNAV_DISABLED=1 is the kill switch for regulated demo environments.

variants

the desktop layout (annotated)

header — devnav trigger (left), progress (center), actions (right)64px · border-bottom

stage — centered column (max 720px) · scrolls1fr × 1fr

footer — absolute, content scrolls behind, gradient fade above88px · position: absolute · pointer-events: auto on inner only

journey paneltransform: translateX(-100%)revealed = translateX(0)

header (64px) · stage (centered, max 720px, scrolls) · footer (88px, position: absolute, content scrolls behind, gradient fade above). journey panel slides in from the left over the stage when revealed.

the mobile layout (<768px)

header (sticky) — progress + main question (large)auto height · question uses --form-mobile-question-size

fields stacked one per row, full widthoverflow visible (page scrolls)

footer inline at end of contentno fade, no positioning tricks

single column · solid bg · header sticky with progress + (optional) large mobile question · fields stacked full-width · footer inline at end of content · journey is full-screen drawer with backdrop.

what's in each slot

brandoptional klera mark + wordmark for the header. omit for a brand-less full-screen experience.

progressthe ProgressIndicator. centered in the header at the same max-width as the stage.

headerActionsoptional right-aligned actions: 'exit flow', 'save & resume', etc.

journeythe dev-mode side nav. typically <JourneyMapNav> from @klera/ui. only mounted in DOM when this slot is provided; only visible when revealed.

childrenthe active step's stage content — your fields, question groups, calculated cards, etc.

footerNavthe back / next nav. typically <StepNavigation>. on desktop, absolute-positioned with content scrolling behind. on mobile, inline at end of content.

mobileMainQuestionoptional mobile-only sticky question banner. only renders <768px; ignored on desktop. uses --form-mobile-question-size typography.