Presentation workflow

• Presentation structure
• Blade presentations
• Livewire single-file presentations
• Deck defaults
• Vertical stacks
• Render data

Presentation structure

Each deck lives in a single Blade file and typically contains one <x-slidewire::deck> with one or more <x-slidewire::slide> elements.

The default file convention is:

resources/views/pages/slides/{presentation-key}.blade.php

Blade presentations

The simplest presentations can be plain Blade files:

<x-slidewire::deck>
    <x-slidewire::slide class="bg-slate-900 text-white">
        <div class="mx-auto max-w-5xl space-y-6">
            <h1 class="text-4xl font-semibold tracking-tight">Kickoff</h1>
            <p class="text-lg text-slate-300">Welcome to SlideWire.</p>
        </div>
    </x-slidewire::slide>

    <x-slidewire::slide class="bg-white text-slate-900">
        <div class="mx-auto max-w-4xl space-y-6">
            <x-slidewire::markdown>
## Agenda

- Goals
- Milestones
- Risks
            </x-slidewire::markdown>
        </div>
    </x-slidewire::slide>
</x-slidewire::deck>

This format works well for static presentations and lightweight content that does not need component state.

Livewire single-file presentations

SlideWire also supports Livewire single-file component presentations. This is the format generated by make:slidewire.

<?php

use Livewire\Component;

new class extends Component {
    public string $title = 'Quarterly Review';

    public function mount(): void
    {
        $this->title = 'Quarterly Review';
    }

    public function with(): array
    {
        return [
            'subtitle' => 'Public properties and render data compile correctly.',
        ];
    }
}; ?>

<x-slidewire::deck theme="black">
    <x-slidewire::slide>
        <div class="space-y-4">
            <h1 class="text-4xl font-semibold tracking-tight">{{ $title }}</h1>
            <p class="text-lg text-slate-300">{{ $subtitle }}</p>
        </div>
    </x-slidewire::slide>
</x-slidewire::deck>

During compilation, SlideWire renders the component view, includes public properties, and merges array data returned by with().

This approach is useful when your presentation needs computed values, reusable data, or setup logic during mount().

Deck defaults

Deck attributes provide defaults for all slides in the presentation:

<x-slidewire::deck theme="black" transition="fade" auto-slide="3000">
    <x-slidewire::slide>
        <h2>Inherits deck defaults</h2>
    </x-slidewire::slide>

    <x-slidewire::slide theme="white" transition="zoom">
        <h2>Overrides selected settings</h2>
    </x-slidewire::slide>
</x-slidewire::deck>

The common runtime precedence is slide attribute, then deck attribute, then config fallback.

This keeps shared settings at the deck level while still allowing individual slides to opt into different behavior.

Vertical stacks

Use <x-slidewire::vertical-slide> to create a vertical group inside a horizontal deck:

<x-slidewire::deck>
    <x-slidewire::slide>
        <h2>Horizontal Slide 1</h2>
    </x-slidewire::slide>

    <x-slidewire::vertical-slide>
        <x-slidewire::slide>
            <h2>Stack Top</h2>
        </x-slidewire::slide>

        <x-slidewire::slide>
            <h2>Stack Bottom</h2>
        </x-slidewire::slide>
    </x-slidewire::vertical-slide>

    <x-slidewire::slide>
        <h2>Horizontal Slide 3</h2>
    </x-slidewire::slide>
</x-slidewire::deck>

Horizontal navigation moves between columns, while vertical navigation moves within a stack. Hash deep-linking uses #/slide/H for flat slides and #/slide/H/V for stacked slides, with both indexes starting at 1.

Render data

If you need dynamic content, keep the presentation in a Livewire single-file component and expose values through public properties or with().

This is a good fit for:

• computed metrics
• shared labels and headings
• lightweight presentation state prepared during mount()