PHPackages masterix21/x-blade-components - 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. masterix21/x-blade-components AbandonedArchivedLibrary[Templating & Views](/categories/templating) masterix21/x-blade-components ============================= Laravel Blade Components ready to use 1.0.9(5y ago)361504MITPHPPHP ^7.4 Since Aug 14Pushed 5y ago2 watchersCompare [ Source](https://github.com/masterix21/x-blade-components)[ Packagist](https://packagist.org/packages/masterix21/x-blade-components)[ Docs](https://github.com/spatie/x-blade-components)[ Fund](https://github.com/sponsors/masterix21)[ GitHub Sponsors](https://github.com/masterix21)[ RSS](/packages/masterix21-x-blade-components/feed)WikiDiscussions master Synced today READMEChangelog (10)Dependencies (6)Versions (11)Used By (0) [![X-Blade-Components Banner](https://github.com/masterix21/x-blade-components/raw/master/banner.png?raw=true)](https://github.com/masterix21/x-blade-components/blob/master/banner.png?raw=true) [![MIT License](https://camo.githubusercontent.com/b790f19b46c2af8ff7ce687bd553f3363a3c89d59d5705f2671077e384ef2253/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d6173746572697832312f782d626c6164652d636f6d706f6e656e7473)](https://img.shields.io/github/license/masterix21/x-blade-components)[![Latest Version](https://camo.githubusercontent.com/db455c2997f26e7f7e1591b6aec6608dab4668733d1fcf9aa561ae31a2e74d89/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6d6173746572697832312f782d626c6164652d636f6d706f6e656e7473)](https://packagist.org/packages/masterix21/x-blade-components)[![GitHub Tests Action Status](https://camo.githubusercontent.com/80e63d8a481cf7ef7a207a21c3936f076b7c060162a94a923c1cb871abfd47ba/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f6d6173746572697832312f782d626c6164652d636f6d706f6e656e74732f54657374732f6d6173746572)](https://github.com/masterix21/x-blade-components/actions?query=workflow%3Arun-tests+branch%3Amaster)[![Total Downloads](https://camo.githubusercontent.com/e6a704392b37bab4a12730f9b1c80fe086bfc7ddfe77f7083b4f7e389a4e1b88/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d6173746572697832312f782d626c6164652d636f6d706f6e656e74732e737667)](https://packagist.org/packages/masterix21/x-blade-components) Ready-to-use Blade components built with TALL stack in mind. A must-have package for the artisans. Support us ---------- [](#support-us) If you like my work, you can [sponsoring me](https://github.com/sponsors/masterix21). Installation ------------ [](#installation) You can install the package via composer: ``` composer require masterix21/x-blade-components npm install tailwindcss @tailwindcss/ui alpinejs imask flatpickr @popperjs/core // or yarn add tailwindcss @tailwindcss/ui alpinejs imask flatpickr @popperjs/core ``` Add `@tailwindcss/ui` to your Tailwind plugin list: ``` // tailwind.config.js module.exports = { plugins: [ require('@tailwindcss/ui'), ] } ``` Add all styles to our css, less or scss: ``` @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; @import "~flatpickr/dist/themes/airbnb.css"; [x-cloak] { display: none; } ``` Import in the `bootstrap.js` file all scripts needed: ``` // The awesome AlpineJS import 'alpinejs'; // Flatpickr Calendar import flatpickr from "flatpickr"; window.flatpickr = flatpickr; // IMask to add input masks support import IMask from 'imask'; window.IMask = IMask; // PopperJS for the best element alignment import { createPopper } from '@popperjs/core/lib/popper-lite.js'; import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow.js'; import flip from '@popperjs/core/lib/modifiers/flip.js'; window.createPopper = createPopper; window.preventOverflow = preventOverflow; window.flip = flip; ``` And finally compile all: ``` # dev npm run dev # production npm run prod # or, if you use yarn... yarn dev yarn prod ``` Usage ----- [](#usage) [See our wiki pages](https://github.com/masterix21/x-blade-components/wiki) Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security -------- [](#security) If you discover any security related issues, please email instead of using the issue tracker. Credits ------- [](#credits) - [Luca Longo](https://github.com/masterix21) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 32 — LowBetter than 71% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity24 Limited adoption so far Community12 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor1 Top contributor holds 95.8% 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 ~3 days Total 10 Last Release 2066d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/177020fc4adb5c08acee3e6fe0b65002a96665c5d5c522a3ef009b4105fd634f?d=identicon)[masterix](/maintainers/masterix) --- Top Contributors [![masterix21](https://avatars.githubusercontent.com/u/6555012?v=4)](https://github.com/masterix21 "masterix21 (92 commits)")[![ryanscherler](https://avatars.githubusercontent.com/u/881938?v=4)](https://github.com/ryanscherler "ryanscherler (4 commits)") --- Tags alpinejsbladecomponentsflatpickrimasklaravellivewirelivewire-componenttailwindlaravelx-blade-components ### Code Quality TestsPHPUnit Static AnalysisPsalm Code StylePHP CS Fixer Type Coverage Yes ### Embed Badge ![Health badge](/badges/masterix21-x-blade-components/health.svg) ``` [![Health](https://phpackages.com/badges/masterix21-x-blade-components/health.svg)](https://phpackages.com/packages/masterix21-x-blade-components) ``` ### Alternatives [itstructure/laravel-grid-view Grid view for laravel framework 2546.6k2](/packages/itstructure-laravel-grid-view)[ycs77/inertia-laravel-ssr-head Simple SSR Head for Inertia Laravel 3211.5k](/packages/ycs77-inertia-laravel-ssr-head) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)