Laravel Hotwire

Laravel Hotwire is a server-driven UI toolkit for Laravel applications. It combines Turbo Drive, Turbo Frames, Turbo Streams, Stimulus controllers and Blade components so you can build fast, reactive interfaces with server-rendered HTML and focused client-side behavior.

Requirements

Laravel Hotwire requires PHP 8.3+, Laravel 12+, Vite, Tailwind CSS v4 and the DOM, libxml and mbstring PHP extensions.

Installation

Install the package with Composer:

composer require emaia/laravel-hotwire

Then scaffold the JavaScript, CSS and package dependencies:

php artisan hotwire:install

The installer adds Stimulus, Turbo, @emaia/stimulus-lazy-loader, controller-specific npm dependencies, the @hotwire Vite alias, the controller loader, CSS preset imports and Laravel Idea metadata. Components work immediately after installation. You only publish controllers when you want to customize their source.

Publish configuration only when you need to change the component prefix or controller loading policy:

php artisan vendor:publish --tag=hotwire-config

For lean installs, CI flags and loader details, see Advanced installation.

Documentation

| | | | ------------------------------------------------------------------- | --------------------------------------------------------------------------------- | | Basic usage | Blade components and auto-loaded Stimulus controllers | | Components | Composable Blade primitives for forms, overlays, navigation, feedback and display | | Controllers | Standalone Stimulus behavior with direct links to each controller contract | | Artisan commands | Installation, generation, validation and discovery command reference | | Turbo Streams | Request detection, DOM helpers and fluent stream responses | | Frame-backed modals | Shared modal hosts driven by Turbo Frames and regular Blade responses | | Stimulus helpers | Fluent helpers for controllers, actions, targets, values, classes and outlets | | Styling and theming | Semantic tokens, preset hooks, dark mode and application overrides | | Extending controllers | Subclass package controllers or publish their source for customization | | Recipes | Practical patterns for Turbo, overlays, forms, streams and component composition | | Registry | Catalog metadata, categories, dependencies, docs paths and styling hooks | | Laravel Boost | Bundled guidelines and focused skills installed through Boost | | Advanced installation | Lean installs, critical controller loading, CI flags and loader details | | Upgrade guide | Version-specific migration notes and compatibility changes |

Browse the same catalog from the terminal:

php artisan hotwire:docs
php artisan hotwire:docs modal --component
php artisan hotwire:docs auto-submit

Components

Laravel Hotwire ships composable Blade components for common server-rendered UI patterns:

| | | | | | ------------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------ | --------------------------------------------------------- | | Accordion | Alert | Alert Dialog | Aspect Ratio | | Attachment | Avatar | Back to Top | Badge | | Breadcrumb | Button | Button Group | Card | | Carousel | Chart | Checkbox | Checkbox Group | | Checkbox Group Item | Color Scheme Script | Color Scheme Toggle | Conditional Field | | Controller Preloads | Drawer | Dropdown | Empty State | | Field | Field Error | Field Group | Field Label | | File | File Upload | Form | Frame | | Frame or Page | Frame or Page Frame | Frame or Page Page | Hover Card | | Icon | Input | Input Group | Item | | Kbd | Map | Marker | Meta | | Meta Cache | Meta Color Scheme | Meta CSRF | Meta Prefetch | | Meta Refresh | Meta Root | Meta View Transition | Meta Visit Control | | Modal | Multi Select | Navbar | Navbar Item | | Optimistic | Pagination | Popover | Progress | | Radio Group | Radio Group Item | Read More | Reveal | | Reveal Item | Rich Text | Scroll Progress | Select | | Separator | Sheet | Side Panel | Sidebar | | Skeleton | Slider | Spinner | Sticky | | Switch | Table | Tabs | Textarea | | Timeago | Toast | Toaster | Toggle | | Toggle Group | Toggle Group Item | Tooltip | Video Embed |

List everything available in your installed version:

php artisan hotwire:components
php artisan hotwire:docs --list --component

Controllers

Package controllers auto-load from the vendor directory after hotwire:install. Use them directly with data-controller, or through the Blade components that mount them for you.

Standalone controllers include:

| | | | | | ---------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------------ | | Accordion | Alert Dialog | Animated Number | Auto Resize | | Auto Save | Auto Select | Auto Submit | Autofocus | | Back to Top | Carousel | Char Counter | Chart | | Checkbox | Checkbox Select All | Clean Query Params | Clear Input | | Color Scheme | Conditional Fields | Copy to Clipboard | Dev Duplicate IDs | | Dev Log | Disclosure | Drawer | Dropdown | | Error Scroll | File Preserve | File Upload | GTM | | Hotkey | Hover Card | Input Mask | Lazy Image | | Map | Modal | Modal Auto Close | Money Input | | Multi Select | OEmbed | Optimistic Dispatch | Optimistic Form | | Optimistic Link | Pagination | Password Visibility | Popover | | Read More | Remote Form | Reset Files | Reveal | | Rich Text | Rich Text Toolbar | Scroll Progress | Sheet | | Side Panel | Sidebar | Slider | Slug | | Tabs | Timeago | Toast | Toaster | | Toggle | Toggle Group | Tooltip | Turbo Frame Src | | Turbo Morph Guard | Turbo Polling | Turbo Preserve Scroll | Turbo Progress | | Turbo View Transition | Unsaved Changes | | |

Publish a package controller only when you want to customize its source:

php artisan hotwire:controllers carousel
php artisan hotwire:controllers --list
php artisan hotwire:controllers --outdated --force

Styling

hotwire:install configures Tailwind with Nova by default and lists the other official presets as commented imports in resources/css/app.css. Uncomment Bloom and comment Nova, or select it while installing, for a chromatic, spacious and elevated visual language with restrained surface radii over the same components and controllers:

php artisan hotwire:install --preset=bloom

Override semantic hooks after the preset:

[data-slot="button"][data-variant="default"] {
    @apply bg-indigo-600 text-white hover:bg-indigo-700;
}

Or generate an application-owned preset:

php artisan hotwire:make-preset brand
php artisan hotwire:make-preset brand --from=nova
php artisan hotwire:make-preset brand --from=bloom

For a layout with an explicit component set, generate a smaller visual bundle while retaining the shared structural foundation:

php artisan hotwire:bundle-preset \
  --preset=bloom \
  --components=badge,button,field,input,navbar,pagination \
  --include=tooltip \
  --output=resources/css/hotwire-front.css

# After a package upgrade, replay the recorded component selection in place.
php artisan hotwire:bundle-preset --from=resources/css/hotwire-front.css --force

See Presets and Theming.

Check Your Setup

Check the controller loader, npm dependencies, published customizations and CSS contracts:

php artisan hotwire:check
php artisan hotwire:check --preset=brand --no-interaction
php artisan hotwire:check --fix
php artisan hotwire:check --fix --skip-install

Imported application presets are validated automatically; --preset accepts a preset name or a path under resources/css for explicit CI checks. Run the application's production asset build separately to verify Tailwind utilities and imports. hotwire:check --fix regenerates the controller loader, untouched v2 selective CSS bundles and adds missing npm dependencies. Edited bundles and legacy plans remain manual. By default it also runs the detected package manager install command; use --skip-install when CI handles that separately.

Development

composer test
composer analyse
bun run test
bun run test:css
bun run test:browser
composer format

bun run build:css compiles every public preset plus a generated hotwire:bundle-preset bundle and application-owned clone for each one, then reports raw/gzip sizes. After an intentional output change, refresh the committed size baseline with bun run test:css:update.

The registry in src/Registry/catalog.php is the source of truth for package components, controllers, npm dependencies, docs paths and styling hooks. Update it whenever you add or rename a package component or controller.

Changelog

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

Contributing

Contributions are welcome via pull requests.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Ednilson Maia
• All Contributors

License

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