svelte-stepper

• A headless library for building animated stepped flows with Svelte, giving full control over layout, styles, and transitions.
• Target Audience: Developers looking to create multi-step workflows, forms, or wizards in Svelte applications.

Key Features:

• Type-Safe: Built entirely in TypeScript with fully type-safe interfaces.
• Animated Transitions: Automatically adjusts height and transitions between steps with customizable animations.
• Context API: Shares data between steps using a Svelte writable store, ideal for multi-step forms.
• Side-Steps: Supports temporary branching into alternate step flows and returning to the main flow.
• Events: Emits stepChange and conclusion events for tracking flow progress.

Framework Support:

• Primarily designed for Svelte, leveraging Svelte's transitions and reactivity.

Advanced Capabilities:

• Custom Animations: Override default transitions with Svelte's built-in or custom transition functions.
• Dynamic Props: Pass step-specific props via makeStep.
• Padding Control: Ensures smooth transitions by handling padding internally.

Use Cases:

• Multi-step forms (e.g., signup flows, surveys).
• Interactive tutorials or onboarding sequences.
• Complex workflows requiring conditional branching.

For examples, see the [interactive demo](https://svelte-stepper.jason-e.dev/ fa-solid fa-up-right-from-square).