zainphp · zainphp · Nov 11, 2025 · Nov 11, 2025
diff --git a/README.md b/README.md
@@ -1,146 +1,185 @@
-# Material Blade
+# 🎨 Material Blade
 
-Material Blade is a simple package that provides the beautifulness of Google [Material Design](https://material.io/) components as Laravel Blade components. Material Blade aims to make UI/UX development of your Laravel app faster, inspired by [Material UI](https://mui.com/).
+> **Beautiful Google Material Design components for Laravel Blade** ✨
 
-> ![WARNING]
-> This package is still under development, please contribute to make it release faster.
+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://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![Laravel](https://img.shields.io/badge/Laravel-9%20%7C%2010%20%7C%2011%20%7C%2012-red.svg)](https://laravel.com)
+[![PHP](https://img.shields.io/badge/PHP-8.1%2B-purple.svg)](https://php.net)
+
+---
+
+## ⚡ Why Material Blade?
+
+**Before** 😓
 ```html
-<!-- from this -->
-<button class="mdc-button">
+<button class="mdc-button mdc-button--raised">
     <span class="mdc-button__ripple"></span>
-    <span class="mdc-button__label">This is a Button</span>
+    <span class="mdc-button__label">Click Me</span>
 </button>
+```
 
-<!-- or this for more shorter -->
-<x-mbc::button label="This is a Button" />
+**After** 😎
+```html
+<x-mbc::button label="Click Me" variant="raised" />
 ```
 
-General knowledge of Laravel and Blade components i'ts required for using this package. However, the fully understand about this feature is helpful for optimizing the usages of this package. If you never heard about [Blade Components](https://laravel.com/docs/8.x/blade#components), it is a good start to understand it and plays with Material Blade package.
-
-> The examples of package usages can be seen on [this repository](https://github.com/sensasi-delight/material-blade-demo).
-
-## Components
-
-The status of [Material Design Web components (v2)](https://m2.material.io/components?platform=web) that implemented on this package are shown on the list below:
-
-- [x] Alert
-- [x] App bar: Top
-- [x] Banner
-- [x] Button
-    - [x] Basic Button
-    - [x] Floating Action Button
-    - [x] Icon Button
-- [x] Card
-- [x] Checkbox
-- [x] Chip
-- [x] Data table
-- [x] Dialog
-- [x] Icon
-- [x] Image list
-- [x] List
-- [x] Menu
-- [x] Navigation drawer
-- [x] Progress indicator
-    - [x] Linear Progress
-    - [x] Circular Progress
-- [x] Radio button
-- [x] Slider
-- [x] Snackbar
-- [x] Switch
-- [x] Tab Bar
-- [x] Text field
-- [x] Tooltip
-- [x] Typography
-
-### Unsupported Components
-
-The implementation of these components below are not supported by default for Material Design Web.
-
-- App bar: bottom
-- Backdrop
-- Bottom navigation
-- Date picker
-- Divider
-- Navigation rail
-- Sheet: bottom
-- Sheet: side
-- Time picker
-
-## Development
-
-To contribute to this project, you can clone this repository and install the dependencies by running the command below:
+Simple. Clean. Beautiful. That's Material Blade! 💫
 
-```bash
-git clone https://github.com/sensasi-delight/material-blade
-cd material-blade
-composer install
-npm install
-npm run dev
-```
+---
 
-## Installation
+## 🚀 Quick Start
 
-Material Blade is available on [packagist.org](https://packagist.org/packages/sensasi-delight/material-blade), You can install the Material Blade to your Laravel project using Composer by command-line below:
+### 📦 Installation
 
 ```bash
 composer require sensasi-delight/material-blade
 ```
 
-<!-- TODO check auto-discovery on laravel 8.x -->
-
-<!-- After Material Blade has been installed on your Laravel project, you have to [registering](https://laravel.com/docs/8.x/providers#registering-providers) the `MaterialBlade\ComponentProvider::class` to the app providers.
-
-```php
-// config/app.php
-
-'providers' => [
-    // Other Service Providers
+### 🎯 Setup
 
-    MaterialBlade\ComponentProvider::class,
-];
-``` -->
-
-Next step, you must includes once the `<x-mbc::_assets />` inside `<head>` on your `view`. That's it‼, now you can use the Material Blade components on your `view`🎉. Your `view` should look like code below.
+Add the assets component in your layout's `<head>`:
 
 ```html
 <!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-        <title>Material Blade Example</title>
+        <title>My App</title>
 
-        <!-- Material Blade required assets -->
+        <!-- 🎨 Material Blade Assets -->
         <x-mbc::_assets />
     </head>
-
     <body>
-        <!-- this is Material Blade component -->
-        <x-mbc::button label="This is a Button" />
+        <!-- ✨ Start using components! -->
+        <x-mbc::button label="Hello World" color="primary" />
     </body>
 </html>
 ```
 
-## Contributing
+### 💡 Usage Examples
+
+```blade
+{{-- 🎯 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](https://m2.material.io/components?platform=web) ready to use:
+
+### 🎯 **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**
+- [📱 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**
+- [🔘 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**
+- [🃏 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**
+- [📈 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
+
+- ✅ **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! 💪
+
+```bash
+# 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
+
+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
+
+- 🐘 **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
+
+- 📖 [**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
 
-Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+Released under the [MIT License](LICENSE). Free to use in personal and commercial projects! 🎉
 
-If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
+---
 
-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.
+<div align="center">
 
-## License
+### 🌟 Star us on GitHub!
 
-The code is released under the MIT license.
+If you find Material Blade useful, please give us a star ⭐
 
-## Contact
+**Made with ❤️ for the Laravel community**
 
-Email - [zainadam.id@gmail.com](mailto:zainadam.id@gmail.com?subject=[GitHub]%20MaterialBlade)
+[⬆ Back to top](#-material-blade)
 
-Twitter - [@sensasi_DELIGHT](https://twitter.com/sensasi_DELIGHT)
+</div>