PHPackages tomsix/laravel-components-library - 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. tomsix/laravel-components-library ActiveLibrary[Templating & Views](/categories/templating) tomsix/laravel-components-library ================================= A collection of pre-made Blade components for Laravel 7.x and up v2.3.5(2mo ago)613.1k7[1 issues](https://github.com/tomsix/laravel-components-library/issues)MITPHPPHP ^7.4|^8.0|^8.1CI failing Since Apr 23Pushed 2mo ago3 watchersCompare [ Source](https://github.com/tomsix/laravel-components-library)[ Packagist](https://packagist.org/packages/tomsix/laravel-components-library)[ Docs](https://github.com/tomsix/laravel-blade-components)[ RSS](/packages/tomsix-laravel-components-library/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (4)Versions (35)Used By (0) [![GitHub Workflow Status](https://camo.githubusercontent.com/8bb27823427e3b0f4f2f8e9fba8247875a60a260f4b8ce538c5b32de71ed54c9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172792f6d61737465723f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/8bb27823427e3b0f4f2f8e9fba8247875a60a260f4b8ce538c5b32de71ed54c9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172792f6d61737465723f7374796c653d666c61742d737175617265)[![GitHub release (latest by date)](https://camo.githubusercontent.com/2ecbbdd2ec5ce047ca6338c6b9dbcc81b61217f38a08171783e8e2db3ece9395/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172793f6c6162656c3d6c6174657374267374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/2ecbbdd2ec5ce047ca6338c6b9dbcc81b61217f38a08171783e8e2db3ece9395/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172793f6c6162656c3d6c6174657374267374796c653d666c61742d737175617265)[![Packagist (custom server)](https://camo.githubusercontent.com/dcbf961ae4712371fecddfb5fccaa986d1abddcb9b1002c37f7ee092f5e38f6e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172793f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/dcbf961ae4712371fecddfb5fccaa986d1abddcb9b1002c37f7ee092f5e38f6e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172793f7374796c653d666c61742d737175617265)[![GitHub release (latest SemVer including pre-releases)](https://camo.githubusercontent.com/950ec8ae073b9bb65dfcf32fec47493b8f1c78cbdf0b0c6ca6331be5a6831f3d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172793f696e636c7564655f70726572656c6561736573266c6162656c3d7072652d72656c65617365267374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/950ec8ae073b9bb65dfcf32fec47493b8f1c78cbdf0b0c6ca6331be5a6831f3d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172793f696e636c7564655f70726572656c6561736573266c6162656c3d7072652d72656c65617365267374796c653d666c61742d737175617265)[![Packagist](https://camo.githubusercontent.com/c0f65086e364370532bdfb3cdbd29acc7cbc052365302aa5ef052716b47412d7/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172793f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/c0f65086e364370532bdfb3cdbd29acc7cbc052365302aa5ef052716b47412d7/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172793f7374796c653d666c61742d737175617265)[![PHP from Packagist](https://camo.githubusercontent.com/ea667fad0365c4bd53901b5a281b3a86a7ed349620cd976ae6cc0e8b428de5d0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172793f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/ea667fad0365c4bd53901b5a281b3a86a7ed349620cd976ae6cc0e8b428de5d0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f746f6d7369782f6c61726176656c2d636f6d706f6e656e74732d6c6962726172793f7374796c653d666c61742d737175617265) Laravel Components Library ========================== [](#laravel-components-library) A collection of pre-made Blade components for Boostrap 4 (and 5). Installation & setup ------------------------ [](#installation--setup) You can install the package via composer: ``` composer require tomsix/laravel-components-library ``` The package will automatically register its service provider. Usage ----- [](#usage) ### Usages Form Components [](#usages-form-components) Use the normal Blade Component syntax from Laravel 7. The form components can be used with the `form` prefix. ``` ``` These attributes are special: - **name** (required) - **id** (When not provided the `name` will be used) - **label** (not shown when null) - **value** (makes use of the old() helper) All other attributes wil be merged on the input html-tag #### Prepend & append [](#prepend--append) The input, select and textarea components are rendered in an extra `div` with the Bootstrap `input-group`class. With this extra it's possible to add a prepend and append. ``` ``` With v2 is it possible to override de default prepend or append with a slot. ``` Demo ``` #### Before & After [](#before--after) Each form component contains 2 extra slots: before and after. ``` Custom label We'll never share your email with anyone else. ``` ### Form Components [](#form-components) #### Form [](#form) Since V2 there is a form component `x-form::form`. This will add the CSRF-token and will use the `@method` directive for PUT and DELETE. The default method is POST instead of GET. ``` ``` #### Input [](#input) ``` ``` #### Textarea [](#textarea) ``` ``` #### Select [](#select) ``` ``` It is possible to add extra options or a default option with slots. ``` Choose an animal ``` #### Model Select [](#model-select) With the `model-select` component you can use a collection of Eloquent models. The `models` attribute accepts the collection. It is also possible to use an Eloquent model as the selected value ``` Select your friend ``` By default, `id` and `name` are used for the option value and text. This can be changed with `key-attribute` and `value-attribute`. The default names can be changed in the config file. #### Checkboxes, radiobuttons and switches [](#checkboxes-radiobuttons-and-switches) A group of checkboxes makes use of the checkboxes component. It is possible to give an array of options or use the single checkbox component within the slot. ``` ``` ##### Arrays [](#arrays) ``` ``` Checkboxes need an array with options. The array key is used for the checkbox value attribute and the value of the array is used as label text. An array without keys will use numbers starting from 0 as a normal array. ###### With keys [](#with-keys) Array: ``` $options = ['lieven' => 'Lieven Scheire', 'jelle' => 'Jelle De Beule', 'jonas' => 'Jonas Geinaart']; ``` Result: ``` ``` ###### Without keys [](#without-keys) Array: ``` $options = ['Lieven Scheire', 'Jelle De Beule', 'Jonas Geinaart']; ``` Result: ``` ``` ##### Inline [](#inline) The `inline` attribute enables the Bootstrap inline-class. ##### Type [](#type) Changing the `type` attribute to `radio` will work to use radiobuttons. The latest version of Bootstrap 4 has also switches and can be used with the type `switch` #### Errors [](#errors) Form errors has 2 option to render. By default, they are displayed in a component. This can be disabled in the config file. It's also possible to add an error bag in a view. ``` ``` ### Boostrap 5 [](#boostrap-5) More info comming soon ### Navigation components [](#navigation-components) The intention is to use these components inside a navigation bar ``` ``` #### Navigation item [](#navigation-item) The url must be included in the component. The 'active' class will be added automatically. ``` About ``` #### Navigation label [](#navigation-label) The label component provides text or an icon. Both props are optional. ``` ``` Customisation ------------- [](#customisation) ### Config [](#config) You can optionally publish the config file with: ``` php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=config ``` The css classes of the elements in a component can be change in the config file. By default, all components use Bootstrap 4 classes. ### Components [](#components) Optionally you can also publish the components and edit then. They will copy to `resources/views/vendor/laravel-components-library`. #### Form components [](#form-components-1) ``` php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=form-components ``` #### Navigation components [](#navigation-components-1) ``` php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=navigation-components ``` #### All components [](#all-components) ``` php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=components ``` License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE) for more information. ### Health Score 56 — FairBetter than 98% of packages Maintenance86 Actively maintained with recent releases Popularity31 Limited adoption so far Community15 Small or concentrated contributor base Maturity76 Established project with proven stability Bus Factor1 Top contributor holds 94.2% 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 ~65 days Recently: every ~231 days Total 34 Last Release 68d ago Major Versions v0.1.5 → v1.0.02020-04-28 1.3.4 → v2.1.02021-09-09 v2.2.0 → v3.x-dev2022-05-23 PHP version history (5 changes)v0.1.1PHP ^7.4 v1.2.1PHP ^7.0|^8.0 1.3.0PHP ^7.4|^8.0 v3.x-devPHP ^8.1 v2.3.0PHP ^7.4|^8.0|^8.1 ### Community Maintainers ![](https://www.gravatar.com/avatar/c2e871c947f7cb232ac9912061127dc8158c34be3f6a564fe881e053d83f6c2a?d=identicon)[tom.six](/maintainers/tom.six) --- Top Contributors [![tomsix](https://avatars.githubusercontent.com/u/60874146?v=4)](https://github.com/tomsix "tomsix (113 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (6 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)") --- Tags laravelcomponentsbladeform ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/tomsix-laravel-components-library/health.svg) ``` [![Health](https://phpackages.com/badges/tomsix-laravel-components-library/health.svg)](https://phpackages.com/packages/tomsix-laravel-components-library) ``` ### Alternatives [robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[ddfsn/blade-components Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps. 193.1k](/packages/ddfsn-blade-components)[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)