Skip to content
LarawellUi

Blade components you install and own.

Forms, date pickers, tables, modals and more for Laravel. One Artisan command copies the Blade, JavaScript and Tailwind CSS into your app. Plain Blade with a small vanilla JS file per component: no Livewire or Alpine needed, no package at runtime, and they work inside Livewire 3 and 4 components too.

php artisan larawell:add date-range-picker
Standard room
Deluxe room
Suite

1 night, Deluxe room

Total: $189

Built from <x-widget.text-input>, <x-widget.date-range-picker>, <x-widget.price-roll> and <x-widget.button>.

Buy Me a Coffee

Install in three steps

For Laravel 12 and 13 with Vite and Tailwind CSS v4, which new Laravel apps have out of the box.

  1. Require the package

    It only does the copying, so it can stay a dev dependency. Your app never needs it at runtime.

    Terminal
    composer require --dev larawellui/larawellui
  2. Add the components you need

    Name the components, or run it with no names to pick from a list. It copies each one and what it depends on, rewrites the PHP namespaces to yours and adds the JS and CSS imports. It checks for Tailwind CSS 4.1+ before writing anything. Run it again with --installed to pick up updates: files you haven't edited get the new version, files you have are skipped and reported, and larawell:diff shows what you'd miss. Commit larawellui.lock, which keeps track.

    Terminal
    php artisan larawell:add datepicker table
  3. Build your assets and use them

    Then write the tag like any other Blade component.

    Terminal, then Blade
    npm run build
    
    <x-widget.datepicker name="start_date" label="Start date" />

Works with Livewire

Not needed, but supported: every component is checked in a browser inside Livewire 3 and 4 components.

  • Form controls bind with wire:model, no name needed, and show the property's value and its validation errors after every render.
  • What someone did stays as they left it through a render: an open modal or menu, a panel they opened, a running stopwatch, files they picked.
  • The component shows toasts and opens or closes modals with $this->dispatch().
  • Components a render or wire:navigate brings in set themselves up. Each one's page has a Livewire example under Usage.
Blade, then PHP
<form wire:submit="save">
    <x-widget.text-input label="Email" type="email" wire:model="email" />
    <x-widget.datepicker label="Start date" wire:model.live="start" />
    <x-widget.button type="submit">Save</x-widget.button>
</form>

// In the component, once it's saved
$this->dispatch('toast', type: 'success', message: 'Saved.');

Ready for AI agents

Agents get the same catalogue in a form they can read. Each component's entry has its install command, props, working examples and full source, so an agent can add a component or write it in by hand.

/llms.txt
An index of every component, for agents that follow the llms.txt convention.
/r/index.json
Every component, with a link to its full entry.
/r/datepicker.json
One component's full entry: install command, props, examples and source.
php artisan larawell:list --json
The same catalogue offline, from the installed package.
php artisan larawell:mcp
An MCP server in your app: the catalogue, what this app has installed and edited, and installing with a dry run first.

Components

Each one brings what it depends on, server side included. Adding the date picker also adds the field frame and icon it's built from, plus validation rules such as MinimumAge in App\Rules.

Questions

Is LarawellUi the same as laravel/ui?
No. laravel/ui is the Laravel team's older package that scaffolds Bootstrap, Vue or React login pages. LarawellUi is a separate, independent project: a catalogue of Blade and Tailwind CSS v4 components that one Artisan command copies into your app.
How is it different from a starter kit or a component package?
A starter kit sets up a new app once. A component package stays installed and you call its components. LarawellUi copies each component's Blade, JavaScript and CSS into your existing app, so you can edit them like your own code, and it needs no Livewire or Alpine.
Does my app need LarawellUi at runtime?
No. The package only does the copying, so it can stay a dev dependency. Once a component is copied in, it runs without it.
Is it free?
Yes. LarawellUi is open source and MIT licensed.

Free, and staying free

LarawellUi is MIT licensed and built in spare time. If a component saved you an afternoon, a coffee helps pay for new components, fixes and keeping up with Laravel and Tailwind releases.

Buy Me a Coffee