Skip to main content

​
Quick Start

This guide will walk you through creating your first Flux components. You’ll learn the basics of using Flux’s component syntax and build a simple interface.
Make sure you’ve completed the installation guide before proceeding.

​
Your First Component

Let’s start with the most basic Flux component - a button.

​
Create a Livewire Component

1

Generate a Livewire component

php artisan make:livewire Welcome
2

Add Flux components to the view

Open resources/views/livewire/welcome.blade.php and replace the contents:
resources/views/livewire/welcome.blade.php
<div class="p-8">
    <flux:heading size="lg">Welcome to Flux</flux:heading>
    <flux:subheading>Build beautiful interfaces with Livewire</flux:subheading>

    <div class="mt-4">
        <flux:button>Get Started</flux:button>
    </div>
</div>
3

View your component

Add a route to test your component in routes/web.php:
routes/web.php
Route::get('/welcome', App\Livewire\Welcome::class);
Visit /welcome in your browser to see your first Flux components!

​
Button Variants

Flux buttons come with multiple variants and sizes. Let’s explore them: 
<div class="flex gap-2">
    <flux:button variant="primary">Primary</flux:button>
    <flux:button variant="outline">Outline</flux:button>
    <flux:button variant="filled">Filled</flux:button>
    <flux:button variant="ghost">Ghost</flux:button>
    <flux:button variant="danger">Danger</flux:button>
</div>

​
Button Sizes

<div class="flex items-center gap-2">
    <flux:button size="xs">Extra Small</flux:button>
    <flux:button size="sm">Small</flux:button>
    <flux:button size="base">Base</flux:button>
</div>

​
Buttons with Icons

Flux includes hundreds of Heroicons out of the box: 
<div class="flex gap-2">
    <flux:button icon="plus">Create</flux:button>
    <flux:button icon="trash" variant="danger">Delete</flux:button>
    <flux:button icon="arrow-path">Refresh</flux:button>
    <flux:button icon="cog" variant="ghost" square />
</div>
Use the square attribute to create icon-only buttons. The button automatically becomes square when there’s no text content.

​
Working with Forms

Let’s build a simple form with Flux components:
1

Create a form component

php artisan make:livewire UserForm
2

Add properties to the class

app/Livewire/UserForm.php
<?php

namespace App\Livewire;

use Livewire\Component;

class UserForm extends Component
{
    public $name = '';
    public $email = '';

    public function save()
    {
        $this->validate([
            'name' => 'required|min:3',
            'email' => 'required|email',
        ]);

        // Save logic here...
        session()->flash('message', 'User saved successfully!');
    }

    public function render()
    {
        return view('livewire.user-form');
    }
}
3

Build the form view

resources/views/livewire/user-form.blade.php
<div class="max-w-md mx-auto p-8">
    <flux:heading size="lg">Create User</flux:heading>
    <flux:subheading>Enter the user details below</flux:subheading>

    <flux:separator class="my-6" />

    <form wire:submit="save" class="space-y-6">
        <flux:field>
            <flux:label>Name</flux:label>
            <flux:input wire:model="name" placeholder="John Doe" />
            <flux:error name="name" />
        </flux:field>

        <flux:field>
            <flux:label>Email</flux:label>
            <flux:input type="email" wire:model="email" placeholder="[email protected]" />
            <flux:error name="email" />
        </flux:field>

        <div class="flex gap-2">
            <flux:button type="submit" variant="primary">Save User</flux:button>
            <flux:button type="button" variant="ghost">Cancel</flux:button>
        </div>
    </form>

    @if (session()->has('message'))
        <div class="mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
            <flux:text class="text-green-800 dark:text-green-200">
                {{ session('message') }}
            </flux:text>
        </div>
    @endif
</div>
Flux automatically shows loading states on buttons when they have type="submit" or wire:click attributes. The button will display a loading spinner when the form is submitting.

​
Input Features

Flux inputs come with powerful built-in features:

​
Icons and Addons

<flux:input icon="magnifying-glass" placeholder="Search..." />
<flux:input icon="user" icon-trailing="chevron-down" placeholder="Select user" />

​
Loading States

<flux:input wire:model.live="search" placeholder="Search..." />
The input automatically shows a loading indicator when Livewire is processing the request.

​
Input Variants

<flux:input variant="outline" placeholder="Outline (default)" />
<flux:input variant="filled" placeholder="Filled variant" />
Create interactive dropdowns and tooltips:

​
Basic Dropdown

<flux:dropdown position="bottom" align="start">
    <flux:button icon-trailing="chevron-down">Options</flux:button>

    <flux:menu>
        <flux:menu.item icon="pencil">Edit</flux:menu.item>
        <flux:menu.item icon="document-duplicate">Duplicate</flux:menu.item>
        <flux:separator variant="subtle" />
        <flux:menu.item icon="trash" variant="danger">Delete</flux:menu.item>
    </flux:menu>
</flux:dropdown>

​
Tooltips

<flux:button tooltip="Click to refresh the page" icon="arrow-path" square />
Tooltips work on any Flux component. Just add the tooltip attribute with your message.

​
Separators

Use separators to divide content:

​
Horizontal Separator

<flux:separator />
<flux:separator variant="subtle" />

​
Separator with Text

<flux:separator text="OR" />

​
Vertical Separator

<div class="flex items-center gap-4 h-12">
    <flux:button>Save</flux:button>
    <flux:separator vertical />
    <flux:button variant="ghost">Cancel</flux:button>
</div>

​
Icons

Flux includes the complete Heroicons library. Use icons standalone or within other components: 
<flux:icon icon="check-circle" variant="micro" />
<flux:icon icon="star" variant="mini" />
<flux:icon icon="heart" variant="outline" class="size-8" />

​
Available Icon Variants

  • micro - 16×16px (default)
  • mini - 20×20px
  • outline - 24×24px outline style

Browse All Icons

View the complete Heroicons library to find the perfect icon

​
Building a Complete Example

Let’s combine what we’ve learned into a complete example:
resources/views/livewire/dashboard.blade.php
<div class="max-w-4xl mx-auto p-8">
    <div class="flex items-start justify-between">
        <div>
            <flux:heading size="xl">Dashboard</flux:heading>
            <flux:subheading>Welcome back! Here's what's happening.</flux:subheading>
        </div>

        <flux:dropdown position="bottom" align="end">
            <flux:button icon="cog" variant="ghost" square />

            <flux:menu>
                <flux:menu.item icon="user">Profile</flux:menu.item>
                <flux:menu.item icon="cog-6-tooth">Settings</flux:menu.item>
                <flux:separator variant="subtle" />
                <flux:menu.item icon="arrow-right-on-rectangle">Sign out</flux:menu.item>
            </flux:menu>
        </flux:dropdown>
    </div>

    <flux:separator class="my-6" />

    <div class="grid gap-6 md:grid-cols-3">
        <div class="p-6 bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
            <div class="flex items-center gap-3">
                <flux:icon icon="users" class="size-6 text-blue-500" />
                <flux:heading>Total Users</flux:heading>
            </div>
            <flux:text class="mt-2 text-2xl font-semibold">1,234</flux:text>
        </div>

        <div class="p-6 bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
            <div class="flex items-center gap-3">
                <flux:icon icon="chart-bar" class="size-6 text-green-500" />
                <flux:heading>Revenue</flux:heading>
            </div>
            <flux:text class="mt-2 text-2xl font-semibold">$12,345</flux:text>
        </div>

        <div class="p-6 bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
            <div class="flex items-center gap-3">
                <flux:icon icon="shopping-cart" class="size-6 text-purple-500" />
                <flux:heading>Orders</flux:heading>
            </div>
            <flux:text class="mt-2 text-2xl font-semibold">456</flux:text>
        </div>
    </div>

    <div class="mt-6 flex gap-2">
        <flux:button variant="primary" icon="plus">New Item</flux:button>
        <flux:button variant="outline" icon="arrow-path">Refresh</flux:button>
    </div>
</div>

​
Next Steps

Explore Components

Browse the full component library with interactive examples

Upgrade to Pro

Unlock advanced components like tables, modals, and form elements

Customization

Learn how to customize Flux components for your design system

Dark Mode

Implement dark mode in your Flux application

​
Tips and Best Practices

Use wire:model.live on inputs for real-time validation and reactivity. Flux will automatically show loading indicators during requests.
Combine Flux components with Tailwind utility classes for custom layouts and spacing. All Flux components accept standard HTML attributes.
Use the tooltip attribute on any interactive element to provide helpful context to users.
Always validate user input on the server side, even when using client-side validation. Flux components integrate seamlessly with Laravel’s validation.

Build docs developers (and LLMs) love

Get started for freeTalk to us