PHPackages alexsol22/componix - 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. [Framework](/categories/framework) 4. / 5. alexsol22/componix ActiveLibrary[Framework](/categories/framework) alexsol22/componix ================== Beautiful Laravel Livewire components with Tailwind CSS 02BladeCI failing Since May 23Pushed 12mo agoCompare [ Source](https://github.com/alexsol22/componix)[ Packagist](https://packagist.org/packages/alexsol22/componix)[ RSS](/packages/alexsol22-componix/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) Componix ======== [](#componix) A beautiful collection of reusable Laravel Livewire components with Tailwind CSS styling. Features -------- [](#features) - 🚀 **Dynamic Navbar** - Responsive navigation with dropdown support - 🎯 **Dynamic Modal** - Flexible modal component with Alpine.js integration - 🔍 **Live Search** - Real-time search with debouncing and type filtering - 🎨 **Button Component** - Multiple variants, sizes, and states - 📦 **Card Component** - Flexible card layouts with image support - ⚠️ **Alert Component** - Dismissible alerts with auto-dismiss functionality Requirements ------------ [](#requirements) - PHP 8.1+ - Laravel 10.0+ or 11.0+ - Livewire 3.0+ - Tailwind CSS - Alpine.js Installation ------------ [](#installation) 1. Install the package via Composer: ``` composer require alexsol22/componix ``` 2. Publish the configuration file: ``` php artisan vendor:publish --tag=componix-config ``` 3. Publish the views (optional, for customization): ``` php artisan vendor:publish --tag=componix-views ``` 4. Publish the assets (optional): ``` php artisan vendor:publish --tag=componix-assets ``` Usage ----- [](#usage) ### Livewire Components [](#livewire-components) #### Dynamic Navbar [](#dynamic-navbar) ``` @livewire('componix-navbar') @livewire('componix-navbar', [ 'brand' => 'My App', 'brandUrl' => '/', 'menuItems' => [ ['label' => 'Home', 'url' => '/', 'active' => true], ['label' => 'About', 'url' => '/about', 'active' => false], [ 'label' => 'Services', 'active' => false, 'children' => [ ['label' => 'Web Design', 'url' => '/services/web-design'], ['label' => 'Development', 'url' => '/services/development'], ] ], ] ]) ``` #### Dynamic Modal [](#dynamic-modal) ``` @livewire('componix-modal') Open Modal ``` #### Live Search [](#live-search) ``` @livewire('componix-live-search') @livewire('componix-live-search', [ 'placeholder' => 'Search products...', 'searchUrl' => '/api/products/search', 'minCharacters' => 3, 'maxResults' => 15 ]) ``` ### Blade Components [](#blade-components) #### Buttons [](#buttons) ``` Click me Primary Secondary Success Danger Outline Extra Small Small Medium Large Extra Large Add Item Next Processing... Go to Dashboard ``` #### Cards [](#cards) ``` Card content goes here Card content goes here Product description here This card lifts on hover ``` #### Alerts [](#alerts) ``` Operation completed successfully! An error occurred! Please be careful! Here's some information. Your changes have been saved. This alert cannot be dismissed. This alert will disappear after 3 seconds. ``` Configuration ------------- [](#configuration) The configuration file `config/componix.php` allows you to customize default settings for all components: ``` return [ 'navbar' => [ 'brand' => 'Componix', 'brand_url' => '/', 'sticky' => true, 'shadow' => true, 'background' => 'bg-white', 'text_color' => 'text-gray-900', ], 'modal' => [ 'backdrop_blur' => true, 'close_on_backdrop_click' => true, 'close_on_escape' => true, 'max_width' => 'md', ], 'search' => [ 'debounce' => 300, 'min_characters' => 2, 'max_results' => 10, 'placeholder' => 'Search...', ], // ... more configuration options ]; ``` Demo ---- [](#demo) Visit `/componix` in your Laravel application to see all components in action with a beautiful demo page. Customization ------------- [](#customization) All components are built with Tailwind CSS and can be easily customized by: 1. Publishing the views and modifying the Blade templates 2. Extending the component classes 3. Overriding the configuration values 4. Adding custom CSS classes via the `class` attribute Contributing ------------ [](#contributing) Contributions are welcome! Please feel free to submit a Pull Request. License ------- [](#license) This package is open-sourced software licensed under the [MIT license](LICENSE). Support ------- [](#support) If you discover any security vulnerabilities or bugs, please send an e-mail to the maintainers. --- **Componix** - Beautiful Laravel Livewire components for modern web applications. ### Health Score 15 — LowBetter than 3% of packages Maintenance37 Infrequent updates — may be unmaintained Popularity2 Limited adoption so far Community6 Small or concentrated contributor base Maturity14 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/43e2d30e312f95c80e8ace36f700ab3e75ca77d5ec5c7760f3a650bdb4c64ef8?d=identicon)[alexsol22](/maintainers/alexsol22) --- Top Contributors [![alexsol22](https://avatars.githubusercontent.com/u/74433215?v=4)](https://github.com/alexsol22 "alexsol22 (5 commits)") ### Embed Badge ![Health badge](/badges/alexsol22-componix/health.svg) ``` [![Health](https://phpackages.com/badges/alexsol22-componix/health.svg)](https://phpackages.com/packages/alexsol22-componix) ``` ### Alternatives [laravel/passport Laravel Passport provides OAuth2 server support to Laravel. 3.4k85.0M532](/packages/laravel-passport)[nolimits4web/swiper Most modern mobile touch slider and framework with hardware accelerated transitions 41.8k177.2k1](/packages/nolimits4web-swiper)[laravel/dusk Laravel Dusk provides simple end-to-end testing and browser automation. 1.9k36.7M259](/packages/laravel-dusk)[laravel/prompts Add beautiful and user-friendly forms to your command-line applications. 712181.8M596](/packages/laravel-prompts)[cakephp/chronos A simple API extension for DateTime. 1.4k47.7M121](/packages/cakephp-chronos)[laravel/pail Easily delve into your Laravel application's log files directly from the command line. 91545.3M590](/packages/laravel-pail) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)