TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Step

Step components.

# Basic Usage

Step one...
Step two...
Step three... finished! 
<x-step selected="1" navigate>
    <x-step.items step="1">
        Step one...
    </x-step.items>
    <x-step.items step="2">
        Step two...
    </x-step.items>
    <x-step.items step="3">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Title & Description

Step one...
Step two...
Step three... finished! 
<x-step selected="1" navigate>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Final Step

An option to mark the final step and not move forward.

Step one...
Step two...
Step three... finished! 
<x-step selected="1" navigate>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  completed <!-- [tl! highlight] -->
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Helpers

An option to disable navigation with clicks and use buttons.

Step one...
Step two...
Step three... finished! 
<x-step selected="1" helpers>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Allow Navigation Previous

An option to enable the navigation to the previous.

Step one...
Step two...
Step three... finished! 
<x-step selected="1" helpers navigate-previous>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Alternative Styles

An option to use other two different styles, totaling 3 styles.

Circles

Step one...
Step two...
Step three... finished!

Panels

Step one...
Step two...
Step three... finished! 
<!-- Circles -->
<x-step selected="1"
        circles <!-- [tl! highlight] -->
        helpers>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>
 
<!-- Panels -->
<x-step selected="1"
        panels <!-- [tl! highlight] -->
        helpers>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Finish Slot

Step one...
Step two...
Step three... finished!
TallStackUI 🚀 
<x-step selected="1" helpers>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
    <x-slot:finish>
        TallStackUI 🚀
    </x-slot:finish>
</x-step>

# Wireable

Step one...
Step two...
Step three... finished! 
<!--  Livewire string property: $step - initial value: "1" -->
 
<x-step wire:model="step"
        helpers
        navigate-previous>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Live Wireable

Step one...
Step two...
Step three... finished!

Selected: 1 

<!--  Livewire string property: $step - initial value: "1" -->
 
<x-step wire:model.live="step"
        helpers
        navigate-previous>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Events

Step one...
Step two...
Step three... finished! 
<x-step selected="1"
        helpers
        x-on:change="alert(`Changed: ${$event.detail.step}`)"
        x-on:finish="alert(`Finished: ${$event.detail.step}`)">
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three"
                  completed>
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>
Event Detail Fired when
change { step } The current step changes
finish { step } The last step is finished

# Helper Variations
NEW

An option to use alternative buttons to navigate.

Step one...
Step two...
Step three... finished!
Step one...
Step two...
Step three... finished!
Step one...
Step two...
Step three... finished!
/ 
<!-- default: individual bordered buttons -->
<x-step selected="2" helpers navigate-previous>
    <x-step.items step="1" title="Starting" description="default">Step one...</x-step.items>
    <x-step.items step="2" title="Advancing" description="default">Step two...</x-step.items>
    <x-step.items step="3" title="Finishing" description="default">Step three... <b>finished!</b></x-step.items>
</x-step>
 
<!-- minimal: the same layout with borderless text buttons -->
<x-step selected="2" helpers="minimal" navigate-previous>...</x-step>
 
<!-- compact: a grouped shell with icon-only buttons and a current/total indicator -->
<x-step selected="2" helpers="compact" navigate-previous>...</x-step>
 
<!-- A value containing a dot is treated as a view path -->
<x-step selected="2" helpers="app.steps.custom">...</x-step>
compact mode keeps its width unchanged by disabling edge buttons rather than hiding them.

# Navigation Slots
NEW

An option to use raw HTML content inside the navigation button as a slot.

Step one...
Step two... 
<x-step selected="1" helpers>
    <x-step.items step="1" title="Account" description="Step One">Step one...</x-step.items>
    <x-step.items step="2" title="Review" description="Step Two">Step two...</x-step.items>
    <x-slot:previous>
        <x-button color="secondary" outline icon="arrow-left" x-on:click="previous()">Back</x-button>
    </x-slot:previous>
    <x-slot:next>
        <x-button icon="arrow-right" position="right" x-on:click="next()">Continue</x-button>
    </x-slot:next>
</x-step>

Two JS methods, next() and previous() , are exposed in the component scope: they move selected and dispatch the change event, so a custom button behaves exactly like the built-in one. Guarding is one expression away: 

<x-slot:next>
    <x-button x-on:click="if (valid()) next()">Continue</x-button>
</x-slot:next>
A custom previous slot shows without requiring navigate-previous . Since they are slot names now, a stray bare previous or next attribute throws.

# Skeleton
NEW

An option to display a lazy loading skeleton indicator. 

<x-step skeleton />
<x-step skeleton="4" circles />

Code highlighting provided by Torchlight