First do this.
Then do that.
Almost done...
All done!
import { Steps } from '@skeletonlabs/skeleton-react';
const steps = [
{ title: 'First', content: 'First do this.' },
{ title: 'Then', content: 'Then do that.' },
{ title: 'Finally', content: 'Almost done...' },
];
export default function Default() {
return (
<Steps count={steps.length} className="w-full">
<Steps.List>
{steps.map((item, index) => (
<Steps.Item key={index} index={index}>
<Steps.Trigger>
<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
</Steps.Trigger>
{index < steps.length - 1 && <Steps.Separator />}
</Steps.Item>
))}
</Steps.List>
{steps.map((item, index) => (
<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
{item.content}
</Steps.Content>
))}
<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
All done!
</Steps.Content>
<div className="flex justify-between items-center gap-2">
<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
</div>
</Steps>
);
}First do this.
Then do that.
Almost done...
All done!
<script lang="ts">
import { Steps } from '@skeletonlabs/skeleton-svelte';
const steps = [
{ title: 'First', content: 'First do this.' },
{ title: 'Then', content: 'Then do that.' },
{ title: 'Finally', content: 'Almost done...' },
];
</script>
<Steps count={steps.length} class="w-full">
<Steps.List>
{#each steps as item, index}
<Steps.Item {index}>
<Steps.Trigger>
<Steps.Indicator>{index + 1}</Steps.Indicator>
{item.title}
</Steps.Trigger>
{#if index < steps.length - 1}
<Steps.Separator />
{/if}
</Steps.Item>
{/each}
</Steps.List>
{#each steps as item, index}
<Steps.Content {index} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
{item.content}
</Steps.Content>
{/each}
<Steps.Content index={steps.length} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center"
>All done!</Steps.Content
>
<div class="flex justify-between items-center gap-2">
<Steps.PrevTrigger class="btn preset-filled">Back</Steps.PrevTrigger>
<Steps.NextTrigger class="btn preset-filled">Next</Steps.NextTrigger>
</div>
</Steps>Controlled
Use the step and onStepChange props to control state programmatically.
First do this.
Then do that.
Almost done...
All done!
import { Steps } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';
const steps = [
{ title: 'First', content: 'First do this.' },
{ title: 'Then', content: 'Then do that.' },
{ title: 'Finally', content: 'Almost done...' },
];
export default function Default() {
const [step, setStep] = useState(0);
return (
<Steps step={step} onStepChange={(details) => setStep(details.step)} count={steps.length} className="w-full">
<Steps.List>
{steps.map((item, index) => (
<Steps.Item key={index} index={index}>
<Steps.Trigger>
<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
</Steps.Trigger>
{index < steps.length - 1 && <Steps.Separator />}
</Steps.Item>
))}
</Steps.List>
{steps.map((item, index) => (
<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
{item.content}
</Steps.Content>
))}
<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
All done!
</Steps.Content>
<div className="flex justify-between items-center gap-2">
<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
</div>
</Steps>
);
}First do this.
Then do that.
Almost done...
All done!
<script lang="ts">
import { Steps } from '@skeletonlabs/skeleton-svelte';
const steps = [
{ title: 'First', content: 'First do this.' },
{ title: 'Then', content: 'Then do that.' },
{ title: 'Finally', content: 'Almost done...' },
];
let step = $state(0);
</script>
<Steps {step} onStepChange={(details) => (step = details.step)} count={steps.length} class="w-full">
<Steps.List>
{#each steps as item, index}
<Steps.Item {index}>
<Steps.Trigger>
<Steps.Indicator>{index + 1}</Steps.Indicator>
{item.title}
</Steps.Trigger>
{#if index < steps.length - 1}
<Steps.Separator />
{/if}
</Steps.Item>
{/each}
</Steps.List>
{#each steps as item, index}
<Steps.Content {index} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
{item.content}
</Steps.Content>
{/each}
<Steps.Content index={steps.length} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center"
>All done!</Steps.Content
>
<div class="flex justify-between items-center gap-2">
<Steps.PrevTrigger class="btn preset-filled">Back</Steps.PrevTrigger>
<Steps.NextTrigger class="btn preset-filled">Next</Steps.NextTrigger>
</div>
</Steps>Orientation
Using the orientation prop to control the layout.
First do this.
Then do that.
Almost done...
All done!
import { Steps } from '@skeletonlabs/skeleton-react';
const steps = [
{ title: 'First', content: 'First do this.' },
{ title: 'Then', content: 'Then do that.' },
{ title: 'Finally', content: 'Almost done...' },
];
export default function Default() {
return (
<Steps orientation="vertical" count={steps.length} className="w-full h-48">
<Steps.List>
{steps.map((item, index) => (
<Steps.Item key={index} index={index}>
<Steps.Trigger>
<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
</Steps.Trigger>
{index < steps.length - 1 && <Steps.Separator />}
</Steps.Item>
))}
</Steps.List>
<div className="flex flex-col grow gap-4">
{steps.map((item, index) => (
<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center grow">
{item.content}
</Steps.Content>
))}
<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center grow">
All done!
</Steps.Content>
<div className="flex justify-between items-center gap-2">
<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
</div>
</div>
</Steps>
);
}First do this.
Then do that.
Almost done...
All done!
<script lang="ts">
import { Steps } from '@skeletonlabs/skeleton-svelte';
const steps = [
{ title: 'First', content: 'First do this.' },
{ title: 'Then', content: 'Then do that.' },
{ title: 'Finally', content: 'Almost done...' },
];
</script>
<Steps orientation="vertical" count={steps.length} class="w-full h-48">
<Steps.List>
{#each steps as item, index}
<Steps.Item {index}>
<Steps.Trigger>
<Steps.Indicator>{index + 1}</Steps.Indicator>
{item.title}
</Steps.Trigger>
{#if index < steps.length - 1}
<Steps.Separator />
{/if}
</Steps.Item>
{/each}
</Steps.List>
<div class="flex flex-col grow gap-4">
{#each steps as item, index}
<Steps.Content {index} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center grow">
{item.content}
</Steps.Content>
{/each}
<Steps.Content index={steps.length} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center grow"
>All done!</Steps.Content
>
<div class="flex justify-between items-center gap-2">
<Steps.PrevTrigger class="btn preset-filled">Back</Steps.PrevTrigger>
<Steps.NextTrigger class="btn preset-filled">Next</Steps.NextTrigger>
</div>
</div>
</Steps>Direction
Set the text direction (ltr or rtl) using the dir prop.
First do this.
Then do that.
Almost done...
All done!
import { Steps } from '@skeletonlabs/skeleton-react';
const steps = [
{ title: 'First', content: 'First do this.' },
{ title: 'Then', content: 'Then do that.' },
{ title: 'Finally', content: 'Almost done...' },
];
export default function Default() {
return (
<Steps dir="rtl" count={steps.length} className="w-full">
<Steps.List>
{steps.map((item, index) => (
<Steps.Item key={index} index={index}>
<Steps.Trigger>
<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
</Steps.Trigger>
{index < steps.length - 1 && <Steps.Separator />}
</Steps.Item>
))}
</Steps.List>
{steps.map((item, index) => (
<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
{item.content}
</Steps.Content>
))}
<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
All done!
</Steps.Content>
<div className="flex justify-between items-center gap-2">
<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
</div>
</Steps>
);
}First do this.
Then do that.
Almost done...
All done!
<script lang="ts">
import { Steps } from '@skeletonlabs/skeleton-svelte';
const steps = [
{ title: 'First', content: 'First do this.' },
{ title: 'Then', content: 'Then do that.' },
{ title: 'Finally', content: 'Almost done...' },
];
</script>
<Steps dir="rtl" count={steps.length} class="w-full">
<Steps.List>
{#each steps as item, index}
<Steps.Item {index}>
<Steps.Trigger>
<Steps.Indicator>{index + 1}</Steps.Indicator>
{item.title}
</Steps.Trigger>
{#if index < steps.length - 1}
<Steps.Separator />
{/if}
</Steps.Item>
{/each}
</Steps.List>
{#each steps as item, index}
<Steps.Content {index} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
{item.content}
</Steps.Content>
{/each}
<Steps.Content index={steps.length} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center"
>All done!</Steps.Content
>
<div class="flex justify-between items-center gap-2">
<Steps.PrevTrigger class="btn preset-filled">Back</Steps.PrevTrigger>
<Steps.NextTrigger class="btn preset-filled">Next</Steps.NextTrigger>
</div>
</Steps>Anatomy
Here’s an overview of how the Steps component is structured in code:
import { Steps } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
<Steps>
<Steps.List>
<Steps.Item>
<Steps.Trigger>
<Steps.Indicator />
</Steps.Trigger>
<Steps.Separator />
</Steps.Item>
</Steps.List>
<Steps.Content />
<Steps.PrevTrigger />
<Steps.NextTrigger />
</Steps>
);
}<script lang="ts">
import { Steps } from '@skeletonlabs/skeleton-svelte';
</script>
<Steps>
<Steps.List>
<Steps.Item>
<Steps.Trigger>
<Steps.Indicator />
</Steps.Trigger>
<Steps.Separator />
</Steps.Item>
</Steps.List>
<Steps.Content />
<Steps.PrevTrigger />
<Steps.NextTrigger />
</Steps>API Reference
Unable to load component information for react/steps
Unable to load component information for svelte/steps