Components
Liquid stepper
Progress through steps as liquid: the finished part is one stream that flows into the next dot when you advance — it bulges, fuses and settles on a jelly spring.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { LiquidStepper } from '@vizzele/react';
<LiquidStepper
current={step}
steps={['Account', 'Profile', { label: 'Plan', description: 'Pick one' }, 'Done']}
onStepClick={setStep} // finished steps become buttons
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | (string | { label, description? })[] | — | The steps. |
current | number | — | Index of the current step. |
onStepClick | (index) => void | — | Makes finished steps clickable. |
Accessibility
- An ordered list; the current step has aria-current="step" and finished ones say "(completed)".
- The liquid layer is decorative and hidden from assistive tech.