Stepper
A horizontal progress indicator for multi-step flows.
Usage
Compose Stepper.Root (bind the active step), a Stepper.Nav, and a Stepper.Item per step. Stepper.Next / Stepper.Previous drive navigation and disable themselves at the ends.
<script lang="ts">
import * as Stepper from '$lib/components/ui/stepper';
let step = $state(1);
const steps = ['Account', 'Profile', 'Finish'];
</script>
<Stepper.Root bind:step>
<Stepper.Nav>
{#each steps as title, i (title)}
<Stepper.Item>
<Stepper.Trigger>
<Stepper.Indicator>{i + 1}</Stepper.Indicator>
<Stepper.Title>{title}</Stepper.Title>
</Stepper.Trigger>
<Stepper.Separator />
</Stepper.Item>
{/each}
</Stepper.Nav>
<div class="mt-8 flex justify-between">
<Stepper.Previous size="sm">Back</Stepper.Previous>
<Stepper.Next size="sm">Next</Stepper.Next>
</div>
</Stepper.Root>Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest init