PHPackages sensasi-delight/material-blade - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. sensasi-delight/material-blade ActiveLibrary[Templating & Views](/categories/templating) sensasi-delight/material-blade ============================== Material Blade is a simple package that provides the beautifulness of Google Material Design components as Laravel Blade components. Material Blade aims to make UI/UX development of your Laravel app faster, inspired by Material UI. v0.0.2(2mo ago)141361[6 issues](https://github.com/dominosaurs/material-blade/issues)MITPHPPHP ^8.1CI passing Since Nov 11Pushed 2mo ago1 watchersCompare [ Source](https://github.com/dominosaurs/material-blade)[ Packagist](https://packagist.org/packages/sensasi-delight/material-blade)[ RSS](/packages/sensasi-delight-material-blade/feed)WikiDiscussions main Synced 4d ago READMEChangelog (2)Dependencies (3)Versions (4)Used By (0) 🎨 Material Blade ================ [](#-material-blade) > **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](https://mui.com/) 🚀 [![License](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](LICENSE)[![Laravel](https://camo.githubusercontent.com/22250bdb4ae8746d9da3b88bacb1d8a9cb5d22103282eab6bdd3078359a242d3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d392532302537432532303130253230253743253230313125323025374325323031322d7265642e737667)](https://laravel.com)[![PHP](https://camo.githubusercontent.com/fb7c72456e13f7d5ecf8486e29d02a2e6775aaf4d18622a63529976b0ed0740e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e312532422d707572706c652e737667)](https://php.net) --- ⚡ Why Material Blade? --------------------- [](#-why-material-blade) **Before** 😓 ``` Click Me ``` **After** 😎 ``` ``` Simple. Clean. Beautiful. That's Material Blade! 💫 --- 🚀 Quick Start ------------- [](#-quick-start) ### 📦 Installation [](#-installation) ``` composer require sensasi-delight/material-blade ``` ### 🎯 Setup [](#-setup) Add the assets component in your layout's ``: ``` My App ``` ### 💡 Usage Examples [](#-usage-examples) ``` {{-- 🎯 Alerts --}} Profile updated successfully! {{-- 🎨 Cards --}} Build beautiful interfaces with Material Design! {{-- 🔘 Buttons --}} Save Changes {{-- 📝 Text Fields --}} ``` --- 📚 Components ------------ [](#-components) 30+ [Material Design components](https://m2.material.io/components?platform=web) ready to use: ### 🎯 **Feedback & Alerts** [](#-feedback--alerts) - [🔔 Alert](https://material-blade-docs.vercel.app/components/alert) - [🎪 Banner](https://material-blade-docs.vercel.app/components/banner) - [💬 Dialog](https://material-blade-docs.vercel.app/components/dialog) - [📢 Snackbar](https://material-blade-docs.vercel.app/components/snackbar) ### 🧭 **Navigation** [](#-navigation) - [📱 App Bar](https://material-blade-docs.vercel.app/components/app-bar) - [🚪 Drawer](https://material-blade-docs.vercel.app/components/drawer) - [📋 Menu](https://material-blade-docs.vercel.app/components/menu) - [📑 Tab Bar](https://material-blade-docs.vercel.app/components/tab-bar) ### 🎛️ **Input & Forms** [](#️-input--forms) - [🔘 Button](https://material-blade-docs.vercel.app/components/button) - [⭕ Checkbox](https://material-blade-docs.vercel.app/components/checkbox) - [🔲 Radio](https://material-blade-docs.vercel.app/components/radio) - [🎚️ Slider](https://material-blade-docs.vercel.app/components/slider) - [🔄 Switch](https://material-blade-docs.vercel.app/components/switch) - [📝 Text Field](https://material-blade-docs.vercel.app/components/text-field) - [➕ FAB](https://material-blade-docs.vercel.app/components/fab) - [🔹 Icon Button](https://material-blade-docs.vercel.app/components/icon-button) ### 📊 **Data Display** [](#-data-display) - [🃏 Card](https://material-blade-docs.vercel.app/components/card) - [🏷️ Chip](https://material-blade-docs.vercel.app/components/chip) - [📊 Data Table](https://material-blade-docs.vercel.app/components/data-table) - [🎨 Icon](https://material-blade-docs.vercel.app/components/icon) - [🖼️ Image List](https://material-blade-docs.vercel.app/components/image-list) - [📃 List](https://material-blade-docs.vercel.app/components/list) - [💬 Tooltip](https://material-blade-docs.vercel.app/components/tooltip) - [✍️ Typography](https://material-blade-docs.vercel.app/components/typography) ### ⏳ **Progress Indicators** [](#-progress-indicators) - [📈 Linear Progress](https://material-blade-docs.vercel.app/components/linear-progress) - [⭕ Circular Progress](https://material-blade-docs.vercel.app/components/circular-progress) [**📖 View Full Documentation →**](https://material-blade-docs.vercel.app) --- ✨ Features ---------- [](#-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 -------------- [](#️-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 [](#-contributing) 1. 🍴 Fork the Project 2. 🌿 Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 3. 💾 Commit your Changes (`git commit -m 'Add some AmazingFeature'`) 4. 📤 Push to the Branch (`git push origin feature/AmazingFeature`) 5. 🎉 Open a Pull Request All contributions are **greatly appreciated**! ❤️ --- 📋 Requirements -------------- [](#-requirements) - 🐘 **PHP** 8.1 or higher - 🎨 **Laravel** 9.x, 10.x, 11.x, or 12.x - 💡 Basic knowledge of [Blade Components](https://laravel.com/docs/blade#components) --- 🎓 Resources ----------- [](#-resources) - 📖 [**Documentation**](https://material-blade-docs.vercel.app) - Complete guide and API reference - 🎨 [**Material Design**](https://material.io/) - Design guidelines - 💬 [**Discussions**](https://github.com/sensasi-delight/material-blade/discussions) - Ask questions and share ideas --- 📄 License --------- [](#-license) Released under the [MIT License](LICENSE). Free to use in personal and commercial projects! 🎉 --- ### 🌟 Star us on GitHub! [](#-star-us-on-github) If you find Material Blade useful, please give us a star ⭐ **Made with ❤️ for the Laravel community** [⬆ Back to top](#-material-blade) ### Health Score 37 — LowBetter than 83% of packages Maintenance77 Regular maintenance activity Popularity20 Limited adoption so far Community8 Small or concentrated contributor base Maturity36 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~108 days Total 2 Last Release 75d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/c0e258c66ee803422a0d47f100d873089eb11ee822969e62c8d9b4a27f8f2dce?d=identicon)[sensasi-delight](/maintainers/sensasi-delight) --- Top Contributors [![dominosaurs](https://avatars.githubusercontent.com/u/19289785?v=4)](https://github.com/dominosaurs "dominosaurs (174 commits)") --- Tags blade-componentslaravelmaterialmaterial-designmaterial-uilaravelgooglepackagecomponentsbladematerial-design ### Code Quality Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/sensasi-delight-material-blade/health.svg) ``` [![Health](https://phpackages.com/badges/sensasi-delight-material-blade/health.svg)](https://phpackages.com/packages/sensasi-delight-material-blade) ``` ### Alternatives [tightenco/jigsaw Simple static sites with Laravel's Blade. 2.2k438.5k29](/packages/tightenco-jigsaw)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[area17/blast Storybook for Laravel Blade 308664.1k](/packages/area17-blast)[codeat3/blade-google-material-design-icons A package to easily make use of "Google Fonts Material Icons" in your Laravel Blade views. 23494.4k4](/packages/codeat3-blade-google-material-design-icons)[electrik/slate Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project 102.3k1](/packages/electrik-slate) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)