·

Using Statamic with Livewire and Flux Pro

Statamic is a flat-file CMS. Livewire is a framework for building reactive interfaces. Flux Pro is a component library for Livewire. On paper, these three don't need each other. In practice, they combine into something that's hard to beat: a content-managed site with interactive forms that look polished without writing any JavaScript.

Why this combination?

Statamic handles content beautifully. Blog posts, pages, navigation — all stored as Markdown and YAML files in your Git repository. No database for content, no CMS migration headaches, full version control.

But a static site needs interactive elements: contact forms, newsletter signups, search. That's where Livewire comes in. And once you're using Livewire, Flux Pro gives you pre-built components for inputs, buttons, modals, and toasts — so you're not hand-rolling form UI.

The stack:

  • Statamic for content and templating (Antlers)
  • Livewire for interactive components
  • Flux Pro for polished form UI
  • Alpine.js for small client-side interactions (ships with Livewire)

The Antlers and Blade boundary

The main thing to understand is that Statamic uses Antlers templates, while Livewire uses Blade. They coexist, but they don't mix. An Antlers template can include a Livewire component, but the Livewire component's view must be Blade.

{{-- In your Antlers layout or page template --}}
<section>
    <h2>Get in touch</h2>
    {{ livewire:create-contact }}
</section>

The {{ livewire:create-contact }} tag renders the Livewire component. Everything inside that component — its Blade view — is pure Blade. Antlers doesn't process it.

Blade components in Antlers

One gotcha: Antlers doesn't process Blade component tags like <x-turnstile::scripts />. The workaround is a Blade partial:

{{-- resources/views/partials/turnstile-scripts.blade.php --}}
<x-turnstile::scripts />

Then include it from Antlers:

{{ partial:turnstile-scripts }}

This pattern works for any Blade component you need in an Antlers context.

Flux Pro in Livewire components

Inside your Livewire component's Blade view, Flux Pro components work exactly as documented. Here's a contact form using Flux inputs and buttons:

<form wire:submit="submit">
    <flux:input wire:model="form.name" label="Name" required />
    <flux:input wire:model="form.email" label="Email" type="email" required />
    <flux:textarea wire:model="form.message" label="Message" required />

    <flux:button type="submit" variant="primary">
        Send message
    </flux:button>
</form>

Validation errors display automatically — Flux inputs show inline error messages when Livewire validation fails. Toast notifications work too, using Flux's built-in toast system.

Livewire form classes

Livewire 4 supports form classes that encapsulate validation and data. Combined with Flux, you get clean components with minimal boilerplate:

<?php

namespace App\Livewire\Forms;

use Livewire\Form;

class ContactForm extends Form
{
    public string $name = '';
    public string $email = '';
    public string $message = '';

    public function rules(): array
    {
        return [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'email', 'max:255'],
            'message' => ['required', 'string', 'max:5000'],
        ];
    }
}

The result

Content editors use Statamic's control panel to manage pages and blog posts. Interactive features live in Livewire components with Flux Pro styling. The site deploys by pushing to Git — content and code together. No build step for content, no separate CMS hosting, no API calls to a headless backend. It's a monolith in the best sense.