PHPackages muhsenmaqsudi/laratify - 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. [Utility & Helpers](/categories/utility) 4. / 5. muhsenmaqsudi/laratify ActiveLibrary[Utility & Helpers](/categories/utility) muhsenmaqsudi/laratify ====================== Laratify is a Laravel 7 UI Library with beautifully handcrafted components using TailwindCSS & AlpineJS v0.2.0(6y ago)15131[3 PRs](https://github.com/muhsenmaqsudi/laratify/pulls)MITHTMLPHP ^7.2.5 Since Apr 27Pushed 3y ago1 watchersCompare [ Source](https://github.com/muhsenmaqsudi/laratify)[ Packagist](https://packagist.org/packages/muhsenmaqsudi/laratify)[ RSS](/packages/muhsenmaqsudi-laratify/feed)WikiDiscussions master Synced 3w ago READMEChangelog (2)Dependencies (3)Versions (7)Used By (0) Laratify ======== [](#laratify) Laratify is a Laravel 7 package which includes essential components to make creating forms, table and custom ui's for your laravel blade base application a breeze. **This package requires Node.js to be installed in order to run npm commands and It Uses TailwindCSS as It's UI CSS styles, and it's backed with AlpineJS as it's javascript reactive power.** Useful links: - Support: [GitHub Issues](https://github.com/muhsenmaqsudi/laratify/issues) - Contribute: [GitHub Pulls](https://github.com/muhsenmaqsudi/laratify/pulls) Installation ------------ [](#installation) Require Laratify: ``` composer require muhsenmaqsudi/laratify ``` Publishing Vendor Assets ``` php artisan vendor:publish --tag="laratify-config" php artisan vendor:publish --tag="laratify-views" ``` Add TailwindCSS & AlpineJS UI Preset Scaffolding ``` php artisan laratify:ui ``` With Authentication Scaffolding ``` php artisan laratify:ui --auth ``` Installing TailwindCSS & AlpineJS and compiling them ``` npm install && npm run dev ``` Laratify Components ------------------- [](#laratify-components) Laratify offers useful components to make building your app ui fast & easy. See below examples of each component. Available Colors: All of the default TailwindCSS color pallets are available for all the components where color matters. `Black, White, Gray, Red, Orange, Yellow, Green, Teal, Blue, Indigo, Purple & Pink` All the colors except Black & White comes with a 100 to 900 color shades that you can use like this `{color-name}-{shade-no}` Alert: ``` Your alert message goes here ``` Badge: ``` Your text goes here ``` Button: ``` Button Title ``` - Note: available sizes: 'sm', 'md', 'lg' Input: ``` ``` - for disabling the input set `disabled` attributes, for readonly input set `readonly` attribute\*\* ``` ``` Checkbox: ``` ``` - for disabling the checkbox set `disabled` attributes \\ - checkbox attributes should have `boolean` migration columns. Select: ``` ``` - if the options are an associative array, the keys are used as the labels and the values as the values. For sequential arrays, the values are used for both the labels and values. - :options="\['option1', 'option2', 'option3'\]" => options with sequential array - :options="\[1 => 'option1', 2 => 'option2'\]" => options with associate array File: ``` ``` Textarea: ``` ``` Radios: ``` ``` - :options="\['option1', 'option2', 'option3'\]" => options with sequential array - :options="\[1 => 'option1', 2 => 'option2'\]" => options with associate array Dropdown: ``` ``` - '|' is the separator in the drop down list, so use it when you want to separate links Dialog: ``` Open Dialog Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aut enim eos error eveniet explicabo ipsa ipsam laudantium minima nisi obcaecati omnis quam qui reprehenderit sapiente sunt, tenetur veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet blanditiis deserunt, dolore harum maxime nam nulla quasi voluptate? Adipisci error illum laudantium magnam praesentium quibusdam sit ut. Dolor, dolore, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam, autem corporis deserunt dolores ea eligendi et impedit magni mollitia natus necessitatibus odio quae recusandae reiciendis sunt suscipit vel voluptas? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias, aspernatur atque aut consequuntur cumque deleniti distinctio dolorum et facere fugit iusto labore maxime nemo quam quas repellendus, reprehenderit voluptatibus! Save ``` Tooltip: ``` Element Id ``` Available placements: - top, bottom, right, left, - {top,bottom,right,left}-start, {top,bottom,right,left}-end' Note: **remember to put tooltip after the parent element** Grids & Grid ``` 2 1 3 4 ``` Container, Col & Row ``` 1 2 3 A B C ``` - flex options: initial,1,auto,none,grow,grow-0,shrink,shrink-0, - order options: 1,2,3,4,5,6,7,8,9,10,11,12, first,last,none - align-self options: auto, start, center, end, stretch - flex-dir options: row, row-reverse, col, col-reverse - align option: stretch, start, center, end, baseline (flex's align-items) - justify options: start, center, end, between, around - align-content options: start, center, end, between, around Card ``` Card Title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem ipsam quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat. Deleniti illo quod repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem ipsam quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat. Deleniti illo quod repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem ipsam quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat. Deleniti illo quod repellat. Full name Muhsen Maqsudi Job Title Backend Developer ``` Navbar ``` Your Profile Settings Sign out ``` Table ``` ``` Tabs & Tab ``` Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor odit rerum voluptatibus. Ad alias aperiam beatae culpa delectus, dolor eligendi ipsam minus necessitatibus nihil numquam odit provident ut vitae voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam aut dicta dolore dolorem eligendi expedita in ipsa, ipsum labore maiores porro ratione rem rerum sed sit tempora velit voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, commodi, delectus dicta dignissimos dolorum eaque error excepturi expedita nam neque non nulla praesentium quae quaerat quo rerum saepe veritatis, voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam aut dicta dolore dolorem eligendi expedita in ipsa, ipsum labore maiores porro ratione rem rerum sed sit tempora velit voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, commodi, delectus dicta dignissimos dolorum eaque error excepturi expedita nam neque non nulla praesentium quae quaerat quo rerum saepe veritatis, voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, aliquam asperiores assumenda at corporis cum dolor ea id, impedit ipsa laborum nobis obcaecati ratione rem reprehenderit, unde voluptatem voluptatum. Quaerat! ``` Collapse ``` Collapse Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem ipsam quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat. Deleniti illo quod repellat. ``` Package Config -------------- [](#package-config) For publishing package's config file run the bellow command ``` php artisan vendor:publish --tag="laratify-config" ``` ``` // app/config.php return [ 'text-base-color' => 'white', // changing the app text base color 'background-base-color' => 'blue-500' // changing the app background base color ]; ``` Packages Used ------------- [](#packages-used) Composer packages: - [laravel/ui](https://github.com/laravel/ui) NPM packages: - [tailwindcss](https://www.npmjs.com/package/tailwindcss) - [@tailwindcss/custom-forms](https://www.npmjs.com/package/@tailwindcss/custom-forms) - [laravel-mix-purgecss](https://www.npmjs.com/package/laravel-mix-purgecss) - [laravel-mix-tailwind](https://www.npmjs.com/package/laravel-mix-tailwind) - [alpinejs](https://www.npmjs.com/package/alpinejs) - [tippyjs](https://github.com/atomiks/tippyjs) ### Health Score 24 — LowBetter than 31% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity14 Limited adoption so far Community8 Small or concentrated contributor base Maturity45 Maturing project, gaining track record 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. ### Release Activity Cadence Every ~4 days Total 3 Last Release 2249d ago PHP version history (2 changes)v0.1.0-alphaPHP ^7.3 v0.1.1PHP ^7.2.5 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/15028457?v=4)[Muhsen Maqsudi](/maintainers/muhsenmaqsudi)[@muhsenmaqsudi](https://github.com/muhsenmaqsudi) --- Top Contributors [![muhsenmaqsudi](https://avatars.githubusercontent.com/u/15028457?v=4)](https://github.com/muhsenmaqsudi "muhsenmaqsudi (67 commits)") --- Tags laravellaravel-componentslaravel-packagelaravel-uiphpuiui-components ### Embed Badge ![Health badge](/badges/muhsenmaqsudi-laratify/health.svg) ``` [![Health](https://phpackages.com/badges/muhsenmaqsudi-laratify/health.svg)](https://phpackages.com/packages/muhsenmaqsudi-laratify) ``` ### Alternatives [grumpydictator/firefly-iii Firefly III: a personal finances manager. 23.9k69.5k](/packages/grumpydictator-firefly-iii)[unopim/unopim UnoPim Laravel PIM 10.5k2.4k](/packages/unopim-unopim)[markwalet/nova-modal-response A Laravel Nova asset for Modal responses on an action. 17878.9k](/packages/markwalet-nova-modal-response) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)