Livewire Material
Material 3 Expressive components for Laravel and Livewire, in plain CSS: 74 components, generated colour schemes, icons, shapes and motion. Open source.
Livewire Material brings Material 3 Expressive, Google’s current design system, to Laravel and
Livewire: Blade components such as <x-button>, <x-card> and <x-scaffold>, styled by plain
CSS, with no Tailwind and no JavaScript library beyond the Alpine that ships with Livewire. Since
2.0 it follows M3 Expressive as Google documents it on m3.material.io, checked page by page.
- 74 components: buttons and FABs, menus, chips, text fields, date and time pickers, dialogs and sheets, lists, cards, carousels, progress indicators, snackbars, tabs, app bars, toolbars, navigation bars and rails, and data tables
- Adaptive layouts on M3’s window size classes: a scaffold with a navigation bar on a phone and a rail on wider windows, plus panes and the list-detail, supporting pane and feed layouts
- Colour schemes from one seed colour (
php artisan material:scheme), light and dark, at M3’s three contrast levels, with optional colour profiles; the theme is set before the first paint - The full Material Symbols Rounded set and the 35 M3 Expressive shapes, drawn inline
- Motion on M3’s springs, expressive or standard, and instant with reduced motion
- Error pages and a Markdown mail theme in the application’s own colours
- A local showcase at
/material: every token and component in the application’s own scheme, a search over all of them, and a mail-style demo app - DesignGuard for tests: it fails on leftover Tailwind utilities, literal colours or radii in CSS, breakpoints outside M3’s and missing stylesheet imports
- Laravel Boost guidelines and skills that teach AI agents the components and M3’s rules
How it’s built
- Anonymous Blade components for Laravel 13 and Livewire 4
- Plain CSS in cascade layers on
--md-sys-*custom properties; an application imports all of it or only the stylesheets of the components it uses - Google’s material-color-utilities for the schemes, and Jetpack Compose Material 3’s spring
constants sampled into CSS
linear()easings - Pest, with about 1,000 tests, 282 of them in the browser (Chrome, Firefox and Safari)
- Used by SealShare for its whole interface
Requirements
PHP 8.4+, Laravel 13, Livewire 4, Vite, and Node to generate the colour scheme. Browsers: Chrome 125+, Firefox 151+, Safari 18.4+. Composer installs it from the Gitea repository. Open source under the MIT licence.