There are still dozens of new things to be done in 2025 in TallStackUI v2. Stay tuned for every release!

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 
                  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 
        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 
        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
        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
        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>

Code highlighting provided by Torchlight