Prev
16
Next

Day 16 - Component Challenge

Challenge UI with Livewire & Alpine.js

Source

Day 16

Day 16

Stepper & Progress Ring

Multi-step wizard with validation and circular progress indicator

Stepper / Wizard

Multi-step form wizard with Livewire state management and step validation.

Features

  • Livewire state management
  • Step-by-step validation
  • Progress indicators
  • Horizontal & vertical layouts
  • Clickable completed steps

Interactive Demo

Personal Info

Contact

Address

Payment

Personal Information

Vertical Layout

Account

Profile

Settings

Done

Sizes

Small

Step 1

Step 2

Step 3

Large

Step 1

Step 2

Step 3

Progress Ring

Circular progress indicator using SVG with smooth animations.

Features

  • SVG-based rendering
  • Smooth CSS transitions
  • Multiple sizes & colors
  • Custom center content
  • Livewire reactive binding

Interactive Demo

Profile
75%

Sizes

Small

Medium

Large

Extra Large

Colors

Primary
Success
Warning
Danger
Info

Dashboard Stats

Storage

45% used

8/12

Tasks

8 completed

Profile

75% complete

Usage Examples

Stepper Usage

{{-- Basic Stepper --}}
<x-ui.stepper
    :steps="['Step 1', 'Step 2', 'Step 3']"
    :currentStep="2"
/>
 
{{-- With Livewire Binding --}}
<x-ui.stepper
    wire:model.live="currentStep"
    :steps="$steps"
/>
 
{{-- With Descriptions & Icons --}}
<x-ui.stepper :steps="[
    ['label' => 'Account', 'description' => 'Create account', 'icon' => 'user'],
    ['label' => 'Profile', 'description' => 'Setup profile', 'icon' => 'settings'],
    ['label' => 'Done', 'description' => 'All set!', 'icon' => 'check'],
]" :currentStep="1" />
 
{{-- Vertical Layout --}}
<x-ui.stepper
    :steps="$steps"
    :currentStep="2"
    variant="vertical"
/>
 
{{-- Clickable Steps --}}
<x-ui.stepper
    wire:model.live="currentStep"
    :steps="$steps"
    :clickable="true"
/>
 
{{-- Size Variants --}}
<x-ui.stepper :steps="$steps" size="sm" />
<x-ui.stepper :steps="$steps" size="md" />
<x-ui.stepper :steps="$steps" size="lg" />
 
{{-- Without Numbers --}}
<x-ui.stepper
    :steps="$steps"
    :showNumbers="false"
/>

Progress Ring Usage

{{-- Basic Progress Ring --}}
<x-ui.progress-ring :value="75" />
 
{{-- With Livewire Binding --}}
<x-ui.progress-ring wire:model.live="progress" />
 
{{-- Size Variants --}}
<x-ui.progress-ring :value="60" size="sm" />
<x-ui.progress-ring :value="75" size="md" />
<x-ui.progress-ring :value="85" size="lg" />
<x-ui.progress-ring :value="90" size="xl" />
 
{{-- Color Variants --}}
<x-ui.progress-ring :value="75" color="primary" />
<x-ui.progress-ring :value="85" color="success" />
<x-ui.progress-ring :value="45" color="warning" />
<x-ui.progress-ring :value="25" color="danger" />
 
{{-- With Label --}}
<x-ui.progress-ring
    :value="75"
    :showLabel="true"
    label="Profile"
/>
 
{{-- Custom Center Content --}}
<x-ui.progress-ring :value="45" size="lg">
    <x-lucide-hard-drive class="size-6 text-primary" />
</x-ui.progress-ring>
 
{{-- Custom Max Value --}}
<x-ui.progress-ring
    :value="8"
    :max="12"
    color="success"
>
    <span class="text-sm font-bold">8/12</span>
</x-ui.progress-ring>
 
{{-- Without Animation --}}
<x-ui.progress-ring :value="50" :animate="false" />