README

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 🚀

⚡ Why Material Blade?

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! 💫

🚀 Quick Start

📦 Installation

composer require sensasi-delight/material-blade

🎯 Setup

Add 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>

💡 Usage Examples

{{-- 🎯 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 />

📚 Components

30+ Material Design components ready to use:

✨ Features

✅ 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

🛠️ Development

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

🤝 Contributing

🍴 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! ❤️

📋 Requirements

🐘 PHP 8.1 or higher
🎨 Laravel 9.x, 10.x, 11.x, or 12.x
💡 Basic knowledge of Blade Components

🎓 Resources

📖 Documentation - Complete guide and API reference
🎨 Material Design - Design guidelines
💬 Discussions - Ask questions and share ideas

📄 License

Released under the MIT License. Free to use in personal and commercial projects! 🎉

🌟 Star us on GitHub!

If you find Material Blade useful, please give us a star ⭐

Made with ❤️ for the Laravel community

⬆ Back to top

sensasi-delight / material-blade

Maintainers

Details