Beautiful Google Material Design components for Laravel Blade ✨
Transform your Laravel applications with elegant, ready-to-use Material Design components. Build stunning UIs faster than ever, inspired by Material UI 🚀
Before 😓
<button class="mdc-button mdc-button--raised">
<span class="mdc-button__ripple"></span>
<span class="mdc-button__label">Click Me</span>
</button>After 😎
<x-mbc::button label="Click Me" variant="raised" />Simple. Clean. Beautiful. That's Material Blade! 💫
composer require sensasi-delight/material-bladeAdd the assets component in your layout's <head>:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
<!-- 🎨 Material Blade Assets -->
<x-mbc::_assets />
</head>
<body>
<!-- ✨ Start using components! -->
<x-mbc::button label="Hello World" color="primary" />
</body>
</html>{{-- 🎯 Alerts --}}
<x-mbc::alert severity="success">Profile updated successfully!</x-mbc::alert>
{{-- 🎨 Cards --}}
<x-mbc::card>
<x-mbc::card-header title="Welcome" subtitle="Material Blade" />
<x-mbc::card-content>
Build beautiful interfaces with Material Design!
</x-mbc::card-content>
</x-mbc::card>
{{-- 🔘 Buttons --}}
<x-mbc::button variant="raised" color="primary" icon="save">
Save Changes
</x-mbc::button>
{{-- 📝 Text Fields --}}
<x-mbc::text-field label="Email" type="email" required />30+ Material Design components ready to use:
- 🔔 Alert - 🎪 Banner - 💬 Dialog - 📢 Snackbar
- 🔘 Button - ⭕ Checkbox - 🔲 Radio - 🎚️ Slider - 🔄 Switch - 📝 Text Field
- ➕ FAB - 🔹 Icon Button
- 🃏 Card - 🏷️ Chip - 📊 Data Table - 🎨 Icon - 🖼️ Image List - 📃 List - 💬 Tooltip - ✍️ Typography
- ✅ 30+ Components - Complete Material Design component library
- ✅ Type-Safe - PHP enums for variants and properties
- ✅ Theme Support - Built-in color system with CSS variables
- ✅ Auto-Discovery - No manual service provider registration (Laravel 8+)
- ✅ Icon Variants - Filled, Outlined, Round, Sharp, Two-Tone
- ✅ Elevation Support - Material Design elevation levels (0-24)
- ✅ Slot-Based - Flexible content structure with Blade slots
- ✅ Well Documented - Comprehensive docs and examples
Want to contribute? We'd love your help! 💪
# Clone the repository
git clone https://github.com/sensasi-delight/material-blade
cd material-blade
# Install dependencies
composer install
npm install
# Start development
npm run dev- 🍴 Fork the Project
- 🌿 Create your Feature Branch (
git checkout -b feature/AmazingFeature) - 💾 Commit your Changes (
git commit -m 'Add some AmazingFeature') - 📤 Push to the Branch (
git push origin feature/AmazingFeature) - 🎉 Open a Pull Request
All contributions are greatly appreciated! ❤️
- 🐘 PHP 8.1 or higher
- 🎨 Laravel 9.x, 10.x, 11.x, or 12.x
- 💡 Basic knowledge of Blade Components
- 📖 Documentation - Complete guide and API reference
- 🎨 Material Design - Design guidelines
- 💬 Discussions - Ask questions and share ideas
Released under the MIT License. Free to use in personal and commercial projects! 🎉
If you find Material Blade useful, please give us a star ⭐
Made with ❤️ for the Laravel community