SlideWire showcase

Every SlideWire primitive in one deck.

A modern Laravel and Livewire showcase built to exercise themes, components, motion, media, layout helpers, and presenter-focused flow.

Laravel + Livewire Feature tour Mon Mar 23 2026

Runtime

Deck defaults

Controls, progress, fullscreen, touch, keyboard, and shared transitions are enabled so the deck behaves like a presentation, not a static page.

Built in

Theme coverage

Aurora, white, neon, sunset, default, black, and solarized all appear as real slide themes across the deck.

Navigation

Use it like a speaker

Press Space or click to advance.

Use arrows or swipe to change direction.

Watch for a vertical drill-down later in the deck.

Showcase source code

Panel component

Four panel variants cover most presentation surfaces.

Use default, elevated, outlined, and glass wrappers to frame stats, code, media, and supporting content without rebuilding the shell each time.

Balanced

Default

A flexible surface for most content blocks.

Depth

Elevated

Add more lift when the card needs stronger emphasis.

Crisp

Outlined

Sharp framing works well on lighter or denser slides.

Atmospheric

Glass

Keep backgrounds visible while preserving contrast.

Text and image primitives

Semantic wrappers keep motion and typography close to the content.

Headings, paragraphs, inline labels, vertical editorial copy, and image entry effects all travel through dedicated SlideWire components.

Heading, inline, paragraph

Text types

Inline label

Heading wrapper

Paragraph wrapper with built-in animation metadata.

Vertical + custom font

Orientation and fonts

Livewire

blade-first();

Animation ready

Image component

Title slides set the tone fast.

The hero variant opens a deck, the default variant anchors section intros, and the minimal variant closes things out without extra scaffolding.

Variants used in this showcase

• Hero: Slide 1
• Default: This slide
• Minimal: Final slide

Theme list

• aurora
• white
• neon
• sunset
• default
• black
• solarized

Vertical navigation

One topic can branch downward without leaving the main storyline.

This slide is the top of a vertical stack. Press Down to drill deeper, then Up to come back out and continue horizontally.

Nested flow

How it feels

Left and right move between primary sections.

Up and down explore the active vertical stack.

Space still advances linearly through the story.

Vertical detail slide

Use the vertical layer for drill-downs, not detours.

Top slide

Chapter overview

Set context before the audience dives into detail.

This slide

Deep detail

Explain the mechanics, code, or workflow that supports the broader point.

Back up

Return path

Move back to the top of the stack, then continue through the main deck.

Agenda layouts

Agenda slides shape the same outline three different ways.

List

Simple section scanning

1

Foundation

Deck setup, routes, and defaults.

2

Composition

Panels, split layouts, text, images, and code.

3

Motion

Fragments, transitions, and auto-animate.

Cards

Chunkier chapter tiles

1

Laravel cadence

Single-file decks feel natural in a Blade app.

2

Livewire runtime

Navigation and state stay reactive.

Timeline

Good for roadmap pacing

1

Start with structure

Open with the frame for the talk.

2

Demonstrate primitives

Show every core component in context.

3

Land the deck

End with links and next steps.

Steps layouts

One process, three presentation moods.

Showcase the full workflow with the connected variant, then use cards or a minimal list when the same story needs a lighter footprint.

Compact overview

Cards

Best when each step has equal weight.

Lean outline

Minimal

Best for setup notes and onboarding.

Full narrative

Connected

Best for launch plans and rollout flows.

Connected - 2 columns

Route

Publish the deck at a real URL.

Theme

Choose the visual system for the whole presentation.

Animate

Add transitions and reveals only where they help.

Share

Ship docs, source, and the live demo together.

Cards - 3 columns

Plan

Frame it.

Build

Compose it.

Present

Run it.

Minimal - 1 column

01

Prompt

Describe the deck.

02

Generate

Scaffold the file.

03

Refine

Polish the pacing.

Timelines

Timeline slides cover orientations and item states.

Use the vertical layout for richer milestone detail, then switch to a horizontal row when the audience only needs the broad progression.

Default

Neutral

Complete

Finished

Current

Active

Upcoming

Next up

Vertical orientation

Phase 1

Default

Neutral milestone for supporting context.

Phase 2

Complete

Finished work gets a success state.

Phase 3

Current

The active beat gets stronger emphasis.

Phase 4

Upcoming

Future work uses the warning palette.

Compressed view

Horizontal orientation

Keep each item shorter here. Horizontal timelines work best as a quick roadmap, not a dense explanation block.

Plan

Set direction.

Build

Author slides.

Launch

Ship live.

Two column slide

Ratios, gaps, alignment, and reverse order are all configurable.

ratio 1:1

gap md, align start

ratio 2:1

gap lg, align center

ratio 1:2

gap xl, reverse, align stretch

Media split layout

Media split layouts still offer a focused content-plus-visual format.

media-style

Plain

Use plain output when the media already carries its own framing.

media-position right

Framed

A bordered media wrapper gives screenshots more presence.

ratio 2:3

Panel

The panel style wraps the media side in a more atmospheric shell.

Laravel and Livewire in one file

• Start with make:slidewire
• Author in Blade with Tailwind
• Mix prose, bullets, and code fences

Route::slidewire('/showcase', 'showcase');

Controlled highlighting

Code

<x-slidewire::slide theme="white" transition="fade">
    <x-slidewire::panel title="Blade first" />
</x-slidewire::slide>

Mermaid support

Diagram

flowchart TD
    A[Laravel route] --> B[SlideWire deck]
    B --> C[Livewire runtime]
    C --> D[Themes]
    C --> E[Fragments]
    C --> F[Media]

Animation gallery

Text supports every built-in entry animation, and images share the same motion contract.

fade

pop

zoom-in

zoom-out

typewriter

slide-left

slide-right

slide-up

slide-down

blur

Motion and backgrounds

Fragments plus slide metadata

This slide uses the `background` shortcut rather than `background-image`.

It also layers in a muted looping video background behind the visual overlay.

Fragments reveal in sequence, keeping the speaker focused on one beat at a time.

slide fade zoom convex concave none

Auto animate - state one

Shared element IDs can keep the same content and only change position.

Auto-animate demo

Keep the content stable.

The same logo and text block move into a new position on the next slide.

Auto-animate demo

Keep the content stable.

The same logo and text block move into a new position on the next slide.

Minimal variant

SlideWire can carry the whole story.

From title cards to diagrams, media, auto-animate sequences, and polished navigation, the package gives Laravel and Livewire teams a full presentation surface area.

Explore the docs Back to home deck Showcase source code View on GitHub