mach3builders/mach3ui

Mach3Builders User Interface

5.0.0-beta.3 2026-02-11 15:18 UTC

Requires

• php: ^8.4
• illuminate/contracts: ^11.0||^12.0
• mallardduck/blade-lucide-icons: ^1.26
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• larastan/larastan: ^3.0
• laravel/pint: ^1.14
• nunomaduro/collision: ^8.8
• orchestra/testbench: ^10.0.0||^9.0.0
• pestphp/pest: ^4.0
• pestphp/pest-plugin-arch: ^4.0
• pestphp/pest-plugin-laravel: ^4.0
• phpstan/extension-installer: ^1.4
• phpstan/phpstan-deprecation-rules: ^2.0
• phpstan/phpstan-phpunit: ^2.0

MIT

• Mach3Builders

• ui
• laravel
• mach3builders

README

A Laravel Blade UI component library that works seamlessly with and without Livewire. Built with Alpine.js for interactivity and Tailwind CSS for styling.

Features

• 50+ ready-to-use Blade components
• Works with vanilla Laravel and Livewire
• wire:model support out of the box
• Smart class merging with UI::classes()
• Tailwind CSS 4 theming support
• Lucide icons included

Requirements

• PHP 8.4+
• Laravel 11 or 12
• Tailwind CSS 4

Installation

composer require mach3builders/ui

Usage

All components use the ui: prefix:

<ui:button>Click me</ui:button>

<ui:input name="email" label="Email" placeholder="[e-mail]" />

<ui:select name="country" label="Country">
    <ui:select.option value="nl">Netherlands</ui:select.option>
    <ui:select.option value="be">Belgium</ui:select.option>
</ui:select>

<ui:checkbox name="terms" label="I agree to the terms" />

With Livewire

Components automatically pass through wire: attributes:

<ui:input wire:model="email" name="email" label="Email" />

<ui:select wire:model.live="country" name="country">
    ...
</ui:select>

Available Components

Form

input, textarea, select, checkbox, radio, switch, datepicker, file-upload, field, label, hint, error

Buttons

button, button.group

Feedback

alert, badge, progress, skeleton, toast, toaster

Layout

card, box, modal, dropdown, tabs, accordion, divider, section

Navigation

nav, breadcrumbs, pagination, steps

Data Display

table, thead, tbody, tr, th, td, avatar, icon, definition-list

Other

heading, link, kbd, code-editor, chart

Class Builder

Use UI::classes() for smart Tailwind class merging:

$classes = UI::classes()
    ->add('px-4 py-2 rounded')
    ->add($variant, [
        'primary' => 'bg-primary text-white',
        'secondary' => 'bg-secondary text-gray-900',
    ])
    ->add($size, [
        'sm' => 'text-sm',
        'md' => 'text-base',
        'lg' => 'text-lg',
    ])
    ->when($disabled, 'opacity-50 cursor-not-allowed')
    ->merge($attributes);

User classes automatically override base classes with the same Tailwind prefix:

<!-- User's px-6 overrides component's px-4 -->
<ui:button class="px-6">Wide button</ui:button>

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

License

The MIT License (MIT). Please see License File for more information.