#162
Horizontal stepper
A four-step horizontal stepper inside a card with Back and Next buttons that advance the step.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Horizontal stepper" pattern (@codeatlasdev/ui demo #162, navigation/stepper) in my app.
Call get_demo({ ids: ["#162"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Multi-step flows such as onboarding or checkout where the user moves through ordered stages.
Keep these library parts, with the props and tokens the demo uses:
- Stepper, Button, Card, Stack, Flex from "@codeatlasdev/ui"
Behaviour to keep:
- `<Stepper {steps} bind:current={step} />` with `let step = $state(0)`
- `const steps` has 4 entries with a `label` field: Account, Profile, Billing, Review
- Wrapper is `<Card p="6" full>` with `<Stack gap="6">`
- Body shows `Step {step + 1}: {steps[step].label}`
- Back is `<Button variant="ghost" disabled={step <= 0} onclick={() => step--}>`
- Next is `<Button variant="filled" disabled={step >= steps.length - 1} onclick={() => step++}>` and reads Finish on the last step
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Stepper
@codeatlasdev/ui - Button
@codeatlasdev/ui - Card
@codeatlasdev/ui - Stack
@codeatlasdev/ui - Flex
@codeatlasdev/ui
How it is built
- `<Stepper {steps} bind:current={step} />` with `let step = $state(0)`
- `const steps` has 4 entries with a `label` field: Account, Profile, Billing, Review
- Wrapper is `<Card p="6" full>` with `<Stack gap="6">`
- Body shows `Step {step + 1}: {steps[step].label}`
- Back is `<Button variant="ghost" disabled={step <= 0} onclick={() => step--}>`
- Next is `<Button variant="filled" disabled={step >= steps.length - 1} onclick={() => step++}>` and reads Finish on the last step
Related
Loading source.