hungnm28/livewire-form

Reusable Blade UI components for Laravel and Livewire applications.

2.0.1 2026-05-26 14:52 UTC

Requires

• php: ^8.1|^8.2|^8.3|^8.4|^8.5
• illuminate/support: ^10.0|^11.0|^12.0|^13

Requires (Dev)

• orchestra/testbench: ^8.0|^9.0|^10.0|^11.0|^12.0|^13.0
• phpunit/phpunit: ^10.0|^11.0|^12.0|^13.0

Suggests

• @tabler/icons-webfont: Required when you do not use the CDN shipped by the package layout.
• alpinejs: Required for modal, aside, theme settings, and interactive components when Livewire does not provide Alpine.
• livewire/livewire: Required when using the layout or components that rely on Livewire directives.
• tailwindcss: Required to compile the utility classes used by the Blade components.

MIT

• hungnm28

• ui
• form
• laravel
• blade
• tailwind
• livewire

README

Reusable Blade UI components for Laravel and Livewire applications.

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS in the host application
• Livewire when using the package layout or Livewire-bound form controls
• Alpine.js for modal, aside, fullscreen, and theme interactions
• Tabler Icons Webfont for icon components

Livewire 3 already ships Alpine for the common setup. If your app does not use Livewire, install and boot Alpine yourself.

Installation

composer require hungnm28/livewire-form

Laravel auto-discovers the service provider. The package registers anonymous Blade components under the lf prefix:

<x-lf::form.input name="email" label="Email" />
<x-lf::btn.primary type="submit">Save</x-lf::btn.primary>
<x-lf::modal title="Edit user">...</x-lf::modal>

Publishing

php artisan vendor:publish --tag=livewire-form-config
php artisan vendor:publish --tag=livewire-form-views
php artisan vendor:publish --tag=livewire-form-assets

The assets publish to resources/js/vendor/livewire-form.

Tailwind

Add the package views to your Tailwind content paths so the component classes are generated:

// tailwind.config.js
export default {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './vendor/hungnm28/livewire-form/resources/views/**/*.blade.php',
  ],
};

The components use primary-* color utilities. Define them in your application theme, or map primary to one of your existing palettes.

JavaScript

If you publish package assets, import them from your app entrypoint:

// resources/js/app.js
import './vendor/livewire-form/app';

If you prefer to import directly from vendor, use:

import '../../vendor/hungnm28/livewire-form/resources/js/app';

The JavaScript powers:

• aside open/close via data-action="toggleAside" and data-action="closeAside"
• light/dark/system theme cycling via data-action="cycleTheme"
• fullscreen toggling via data-action="toggleFullscreen"
• the Alpine themeSetting store used by <x-lf::theme.setting />

Components

Form:

<x-lf::form>
    <x-lf::form.input name="name" label="Name" />
    <x-lf::form.select
        name="role"
        label="Role"
        :data="['admin' => 'Admin', 'editor' => 'Editor']"
    />
    <x-lf::form.textarea name="bio" label="Bio" />
    <x-lf::form.checkbox name="active" label="Active" value="1" />
    <x-lf::form.toggle name="published" label="Published" value="1" />
</x-lf::form>

Livewire binding:

<x-lf::form.input wire:model="form.email" label="Email" />

Buttons:

<x-lf::btn.primary>Primary</x-lf::btn.primary>
<x-lf::btn.success>Success</x-lf::btn.success>
<x-lf::btn.danger>Delete</x-lf::btn.danger>
<x-lf::btn.link.primary href="/users">Users</x-lf::btn.link.primary>

Table:

<x-lf::table title="Users" description="Manage user accounts" density="comfortable">
    <x-slot:tools>
        <x-lf::btn.primary>New user</x-lf::btn.primary>
    </x-slot:tools>

    <x-lf::table.thead>
        <x-lf::table.tr>
            <x-lf::table.th sortable direction="asc">Name</x-lf::table.th>
            <x-lf::table.th>Email</x-lf::table.th>
            <x-lf::table.th align="right">Status</x-lf::table.th>
            <x-lf::table.th align="right">Actions</x-lf::table.th>
        </x-lf::table.tr>
    </x-lf::table.thead>

    <x-lf::table.tbody>
        <x-lf::table.tr>
            <x-lf::table.td strong nowrap>Nguyen Manh Hung</x-lf::table.td>
            <x-lf::table.td muted>[e-mail]</x-lf::table.td>
            <x-lf::table.td align="right">Active</x-lf::table.td>
            <x-lf::table.actions>
                <x-lf::btn.default class="px-3 py-1.5">Edit</x-lf::btn.default>
            </x-lf::table.actions>
        </x-lf::table.tr>
    </x-lf::table.tbody>
</x-lf::table>

Modal:

<x-lf::modal wire:model="editing" title="Edit user" size="lg">
    ...
</x-lf::modal>

Open or close a modal without Livewire:

window.dispatchEvent(new CustomEvent('open-modal', { detail: 'modal-id' }));
window.dispatchEvent(new CustomEvent('close-modal', { detail: 'modal-id' }));

Layout:

<x-lf::layout title="Admin">
    <x-slot:aside>
        <x-lf::aside>
            <x-lf::aside.item title="Dashboard" icon="home" url="/admin" />
        </x-lf::aside>
    </x-slot:aside>

    <x-lf::navbar title="Dashboard" />
    <main class="p-4">
        ...
    </main>
</x-lf::layout>

Configuration

return [
    'theme' => 'orange',
    'assets' => [
        'use_cdn_icons' => true,
    ],
];

Set assets.use_cdn_icons to false when your app bundles @tabler/icons-webfont itself.

Backwards Compatibility

The old typo components still exist:

• <x-lf::form.toogle />
• <x-lf::theme.toogle />

Prefer the corrected aliases:

• <x-lf::form.toggle />
• <x-lf::theme.toggle />

Testing

composer install
composer test