Step Chrome

Installation

pnpm dlx shadcn@latest add @ffg/step-chrome

Usage

import { StepChrome } from "@/components/ui/step-chrome";

<StepChrome step={3} onBack={handleBack} onClose={handleClose} />

The header chrome for the onboarding questionnaire. It sits over the brand-bleed gradient (transparent surface) and combines:

• a 6-segment progress bar — segments before and at step fill with an animated cerulean wipe; later segments stay on the muted track
• a back button — labelled, leading ArrowLeft, fires onBack
• a close button — X glyph, fires onClose

step is 1..6; both callbacks are optional.

Dark mode: the chrome inherits colour from its surroundings. Labels map to text-foreground, the progress track to foreground/30, and the fill to the cerulean data token, so it stays legible against either theme.