PHPackages mellivora/flowblade - 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. mellivora/flowblade ActiveLibrary[Templating & Views](/categories/templating) mellivora/flowblade =================== A Laravel Blade component library based on Flowbite + Tailwind CSS, inspired by Chakra UI 24PHP Since Nov 6Pushed 6mo agoCompare [ Source](https://github.com/zhouyl/flowblade)[ Packagist](https://packagist.org/packages/mellivora/flowblade)[ RSS](/packages/mellivora-flowblade/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) Flowblade ========= [](#flowblade) [![Laravel 11+](https://camo.githubusercontent.com/a3c3c9214768d69c66eaccf95c5ec16c5cbe9dd4d5f52f3378f09f5b8da751a2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31312b2d4646324432303f7374796c653d666f722d7468652d6261646765266c6f676f3d6c61726176656c)](https://camo.githubusercontent.com/a3c3c9214768d69c66eaccf95c5ec16c5cbe9dd4d5f52f3378f09f5b8da751a2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31312b2d4646324432303f7374796c653d666f722d7468652d6261646765266c6f676f3d6c61726176656c) [![PHP 8.3+](https://camo.githubusercontent.com/0cf634ad5655800dd22615a5c856aa2b7afab86daf505658c4b106f9e45bae3c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e332b2d3737374242343f7374796c653d666f722d7468652d6261646765266c6f676f3d706870)](https://camo.githubusercontent.com/0cf634ad5655800dd22615a5c856aa2b7afab86daf505658c4b106f9e45bae3c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e332b2d3737374242343f7374796c653d666f722d7468652d6261646765266c6f676f3d706870) [![Tailwind CSS](https://camo.githubusercontent.com/a8381dbbf3090b347a9192a1ab241e851cfe65d14296c3678609263e088a79b4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5461696c77696e642d4353532d3338423241433f7374796c653d666f722d7468652d6261646765266c6f676f3d7461696c77696e642d637373)](https://camo.githubusercontent.com/a8381dbbf3090b347a9192a1ab241e851cfe65d14296c3678609263e088a79b4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5461696c77696e642d4353532d3338423241433f7374796c653d666f722d7468652d6261646765266c6f676f3d7461696c77696e642d637373) [![MIT License](https://camo.githubusercontent.com/153acf9dff19deb8abfc598c53bac50a4ceae0f5c83a552711060d3d78d2c057/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e3f7374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/153acf9dff19deb8abfc598c53bac50a4ceae0f5c83a552711060d3d78d2c057/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e3f7374796c653d666f722d7468652d6261646765) A modern Laravel Blade component library based on **Flowbite + Tailwind CSS**, with an intuitive Style Props API for elegant component styling. 🎯 Design Philosophy ------------------- [](#-design-philosophy) Flowblade embraces a **server-side component-driven architecture** using Laravel Livewire and Alpine.js, offering significant development efficiency improvements over traditional API + Vue/React approaches: ### Why Flowblade? [](#why-flowblade) - **Faster Development**: Build interactive UIs without context-switching between backend and frontend frameworks. Write PHP and Blade templates, leverage Livewire for reactivity. **30-50% faster** development compared to traditional API + Vue/React approaches. - **Reduced Complexity**: No need to manage separate API endpoints, state management libraries, or complex build pipelines. Everything integrates seamlessly with Laravel. - **Better DX**: Full-stack developers can work on features end-to-end without learning multiple frameworks. Blade components are familiar to Laravel developers. - **Smaller Bundle Size**: Alpine.js (15KB) vs Vue/React (40KB+), resulting in faster page loads and better performance. - **Real-time Reactivity**: Livewire provides real-time component updates without writing JavaScript, while Alpine.js handles lightweight interactivity. - **SEO-Friendly**: Server-rendered HTML by default, perfect for content-heavy applications. ### Development Advantages [](#development-advantages) - **Reduced Tech Stack**: Single language (PHP) instead of managing PHP + JavaScript/TypeScript. **Eliminates context-switching** and reduces cognitive load. - **Lower Learning Curve**: Developers only need to know Laravel and Blade, not Vue/React/Angular. **Onboarding time reduced by 40-60%** for new team members. - **Simplified Deployment**: Deploy as a single Laravel application. No separate frontend build process, no Node.js in production, no API versioning concerns. - **Faster Iteration**: Changes to UI logic don't require rebuilding frontend assets. Hot reload works seamlessly with Laravel's development server. ### Perfect For [](#perfect-for) - **Admin Dashboards**: Rapid development of internal tools with real-time updates and complex forms - **Small to Medium Web Applications**: Content management systems, SaaS platforms, business applications - **Laravel Applications**: Seamless integration with Laravel's ecosystem - **Full-Stack Teams**: Developers comfortable with PHP and Blade templates - **Rapid Prototyping**: Build features quickly without framework overhead - **Content-Heavy Sites**: Server-side rendering with progressive enhancement - **Real-time Applications**: Livewire's reactive components for live updates ✨ Features ---------- [](#-features) - 🎨 **138+ Components** - Comprehensive UI component library - 🚀 **Style Props System** - Intuitive props like `color="primary"` and `size="lg"` for flexible styling - 🎯 **Tailwind CSS** - Built on Tailwind's utility-first approach - ⚡ **Alpine.js Ready** - Built-in Alpine.js integration - 🔌 **Livewire Compatible** - Full support for `wire:model`, `wire:click`, etc. - 🎭 **Iconify Support** - Access 100,000+ icons with `` - 🎛️ **Highly Configurable** - Customize colors, sizes, and component prefixes - 📦 **Zero Config** - Works immediately after `composer require` 📋 Requirements -------------- [](#-requirements) Before installing Flowblade, ensure your project meets these requirements: ### System Requirements [](#system-requirements) - **Laravel**: 11.0 or higher - **PHP**: 8.3 or higher - **Tailwind CSS**: 4.0 or higher - **Node.js**: 16.0 or higher (for asset compilation) ### Dependencies [](#dependencies) Flowblade requires the following packages (automatically installed): - **flowbite**: ^3.0 - Design system and JavaScript components - **tailwindcss**: ^4.0 - Utility-first CSS framework - **@tailwindcss/forms**: ^0.5 - Form styling plugin ### Optional Dependencies [](#optional-dependencies) For enhanced functionality, you may want to install: - **Alpine.js**: ^3.0 - For lightweight interactivity (included in Flowbite) - **Livewire**: ^3.0 - For reactive components (`composer require livewire/livewire`) - **Iconify**: For icon support (included via CDN) 📦 Installation -------------- [](#-installation) ### Step 1: Install via Composer [](#step-1-install-via-composer) ``` composer require mellivora/flowblade ``` ### Step 2: Publish Configuration (Optional) [](#step-2-publish-configuration-optional) To customize component prefixes, colors, and sizes: ``` php artisan vendor:publish --tag=flowblade-config ``` This creates `config/flowblade.php` where you can configure: - Component prefix (default: `x-`) - Default colors and sizes - Color and size mappings See the [Quick Start Guide](docs/quick-start.md) for detailed configuration options. ### Step 3: Configure Tailwind CSS [](#step-3-configure-tailwind-css) Add Flowblade views to your `tailwind.config.js`: ``` export default { content: [ "./resources/**/*.blade.php", "./vendor/mellivora/flowblade/resources/views/**/*.blade.php", ], } ``` ### Step 4: Compile Assets [](#step-4-compile-assets) ``` npm run dev ``` 📚 Documentation --------------- [](#-documentation) For detailed setup instructions and configuration options, see: - [Quick Start Guide](docs/quick-start.md) - Get started in 5 minutes - [Installation Guide](docs/installation.md) - Step-by-step setup instructions - [Components Documentation](docs/components/README.md) - Complete component reference - [Style Props System](docs/traits/has-style-props.md) - Intuitive styling with props 🎨 Style Props System -------------------- [](#-style-props-system) Flowblade includes a powerful **Style Props** system that allows you to style components using intuitive props instead of writing Tailwind classes directly: ### Spacing Props [](#spacing-props) ``` {{-- Padding --}} All sides Horizontal and vertical Individual sides {{-- Margin --}} All sides Horizontal centering Vertical margin ``` ### Sizing Props [](#sizing-props) ``` {{-- Width and Height --}} Full width, 16rem height Half width, auto height Min/max width constraints Min/max height constraints ``` ### Color Props [](#color-props) ``` {{-- Background and Text Colors --}} Primary background Using color scales Border color ``` ### Layout Props [](#layout-props) ``` {{-- Display and Position --}} Flex layout Grid layout Overflow control ``` ### Flexbox Props [](#flexbox-props) ``` {{-- Flex Container --}} Flex layout with gap ``` ### Typography Props [](#typography-props) ``` {{-- Text Styling --}} Styled text ``` ### Border and Radius Props [](#border-and-radius-props) ``` {{-- Borders and Rounded Corners --}} Bordered box Fully rounded Large radius ``` ### Shadow and Effects Props [](#shadow-and-effects-props) ``` {{-- Shadows and Effects --}} Box with shadow Interactive box ``` ### Available Color Scales [](#available-color-scales) `primary` `secondary` `success` `warning` `danger` `info` `gray` `blue` `red` `green` `yellow` `purple` `pink` `indigo` `cyan` `teal` Each color supports scales: `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` ### Available Sizes [](#available-sizes) `2xs` `xs` `sm` `md` `lg` `xl` `2xl` `3xl` `4xl` ### Button Variants [](#button-variants) `solid` `outline` `ghost` `link` `subtle` 💡 Advanced Examples ------------------- [](#-advanced-examples) ### Form with Validation [](#form-with-validation) ``` Contact Form Name Email Message Cancel Send ``` ### Dashboard Card Grid [](#dashboard-card-grid) ``` @foreach($stats as $stat) {{ $stat['label'] }} {{ $stat['value'] }} {{ $stat['change'] }} @endforeach ``` ### Navigation with Dropdown [](#navigation-with-dropdown) ``` MyApp Features Pricing Documentation Sign In Get Started ``` 📝 Available Components ---------------------- [](#-available-components) Flowblade includes **138+ production-ready components** organized by category. All components feature: - ✅ **Style Props Support** - Intuitive styling system with semantic props - ✅ **Complete Documentation** - Detailed usage examples and API reference - ✅ **Accessibility Features** - WCAG 2.1 compliant with keyboard navigation - ✅ **Responsive Design** - Mobile-first approach with Tailwind CSS - ✅ **Flowbite Integration** - Built on Flowbite design system For a complete list of all components with detailed documentation, see [Components Documentation](docs/components/README.md). 🚀 Getting Help -------------- [](#-getting-help) ### Documentation [](#documentation) - [Installation Guide](docs/installation.md) - Step-by-step setup instructions - [Components Documentation](docs/components/README.md) - Complete component reference - [Development Plan](docs/TODO.md) - Project roadmap and progress ### Resources [](#resources) - [Flowbite Documentation](https://flowbite.com/) - Design system reference - [Tailwind CSS Documentation](https://tailwindcss.com/) - Utility-first CSS framework - [Laravel Documentation](https://laravel.com/docs) - Laravel framework reference - [Iconify Icons](https://icon-sets.iconify.design/) - Browse available icons 🤝 Contributing -------------- [](#-contributing) Contributions are welcome! Here's how you can help: 1. **Report Issues** - Found a bug? [Open an issue](https://github.com/zhouyl/flowblade/issues) 2. **Suggest Features** - Have an idea? [Create a feature request](https://github.com/zhouyl/flowblade/issues) 3. **Submit Pull Requests** - Want to contribute code? Fork and submit a PR 4. **Improve Documentation** - Help us improve docs and examples ### Development Setup [](#development-setup) ``` # Clone the repository git clone https://github.com/zhouyl/flowblade.git cd flowblade # Install dependencies composer install npm install # Run tests composer test # Build documentation npm run build ``` 📄 License --------- [](#-license) MIT License. See [LICENSE](LICENSE) for details. 🔗 Links ------- [](#-links) - **GitHub**: - **Packagist**: - **Issues**: - **Discussions**: 💝 Support --------- [](#-support) If you find Flowblade helpful, please consider: - ⭐ Starring the repository - 🐛 Reporting bugs and suggesting features - 📝 Contributing to documentation - 🤝 Sharing with the community ### Health Score 18 — LowBetter than 8% of packages Maintenance47 Moderate activity, may be stable Popularity6 Limited adoption so far Community6 Small or concentrated contributor base Maturity13 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/670a28674a5d1c4feb1817a0214b725395c08fbd0c41d5c4dc269a2f27f41620?d=identicon)[zhouyl](/maintainers/zhouyl) --- Top Contributors [![zhouyl](https://avatars.githubusercontent.com/u/1251541?v=4)](https://github.com/zhouyl "zhouyl (570 commits)") ### Embed Badge ![Health badge](/badges/mellivora-flowblade/health.svg) ``` [![Health](https://phpackages.com/badges/mellivora-flowblade/health.svg)](https://phpackages.com/packages/mellivora-flowblade) ``` ### Alternatives [roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content Flexible Content & Repeater Fields for Laravel Nova. 8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle Easy integration of twitters bootstrap into symfony2 7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3871.2M](/packages/limenius-react-bundle)[nicmart/string-template StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions. 2101.7M30](/packages/nicmart-string-template)[symfony/ux-icons Renders local and remote SVG icons in your Twig templates. 555.8M69](/packages/symfony-ux-icons) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)