SlideWire logo SlideWire Docs
Docs

Quickstart

This guide walks through the fastest path from a fresh scaffold to a working SlideWire deck.

Quickstart

Create a presentation

Generate a starter presentation:

php artisan make:slidewire demo/product-launch --title="Product Launch"

This creates a Blade file in your first configured presentation root.

Build your slides

You may keep a presentation as a simple Blade file, or use the generated Livewire single-file component format.

<?php

use Livewire\Component;

new class extends Component {
    public string $headline = 'Product Launch';

    public function with(): array
    {
        return [
            'metrics' => [
                'Activation: 62%',
                'Churn: 1.8%',
            ],
        ];
    }
}; ?>

<x-slidewire::deck theme="aurora" transition="fade">
    <x-slidewire::slide>
        <div class="mx-auto max-w-5xl space-y-6">
            <h1 class="text-4xl font-semibold tracking-tight">{{ $headline }}</h1>

            <x-slidewire::fragment :index="0">
                <p class="text-lg text-slate-200">Private beta is complete.</p>
            </x-slidewire::fragment>

            <x-slidewire::fragment :index="1">
                <p class="text-lg text-slate-200">Pilot customers are now live.</p>
            </x-slidewire::fragment>
        </div>
    </x-slidewire::slide>

    <x-slidewire::slide theme="white">
        <div class="mx-auto max-w-4xl space-y-6">
            <x-slidewire::markdown>
## Launch metrics

@foreach ($metrics as $metric)
- {{ $metric }}
@endforeach
            </x-slidewire::markdown>
        </div>
    </x-slidewire::slide>
</x-slidewire::deck>

The compiler supports public Livewire properties and render data returned from with().

Register the presentation route

use Illuminate\Support\Facades\Route;

Route::slidewire('/slides/product-launch', 'demo/product-launch');

Present the deck

Open /slides/product-launch and navigate with the keyboard, by clicking the stage, or by swiping on touch devices.

If you want to customize the deck further, continue with components reference and presentation features.