PHPackages algoetech/laravel-ui-plustw - 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. algoetech/laravel-ui-plustw ActiveLibrary[Templating & Views](/categories/templating) algoetech/laravel-ui-plustw =========================== Laravel UI utilities and presets copies from Laravel UI. 1.05(2y ago)1121[1 PRs](https://github.com/tairocruiz/laravel-ui-plustw/pulls)MITPHPPHP ^8.0 Since Feb 2Pushed 2y agoCompare [ Source](https://github.com/tairocruiz/laravel-ui-plustw)[ Packagist](https://packagist.org/packages/algoetech/laravel-ui-plustw)[ RSS](/packages/algoetech-laravel-ui-plustw/feed)WikiDiscussions 4.x Synced 1mo ago READMEChangelog (3)Dependencies (6)Versions (4)Used By (0) Laravel UI+ TW ============== [](#laravel-ui-tw) [![Total Downloads](https://camo.githubusercontent.com/a9e620b40df68d6623f532670ca2266821812d63fb9af8d8ec85cb7b8ebc9dd9/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6c61726176656c2f7569)](https://packagist.org/packages/laravel/ui)[![Latest Stable Version](https://camo.githubusercontent.com/e36e7934ffdf37f87665030e87f8ea39a475dd3ee325c19658e6184125e74845/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6c61726176656c2f7569)](https://packagist.org/packages/laravel/ui)[![License](https://camo.githubusercontent.com/809af97596290b80024bf4a4e495830edd5c043a1cc53c966f031eaf78f3d362/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6c61726176656c2f7569)](https://packagist.org/packages/laravel/ui) Introduction ------------ [](#introduction) This package is a modification of [Laravel UI 4.x](https://github.com/laravel/ui/tree/4.x) package. It is created to fill the gap of a simple tailwind authentication scaffolding by copying the methods used in [Laravel UI 4.x](https://github.com/laravel/ui/tree/4.x) package Documentation ------------- [](#documentation) ### Supported Versions [](#supported-versions) Only the latest major version of **Laravel UI+ TW** receives bug fixes. The table below lists compatible Laravel versions: | Version | Laravel Version | Date | |---- |----| | [1.x](https://github.com/laravel/ui/tree/4.x) | 9.x, 10.x, 11.x | 2nd Feb' 2024 | ### Installation [](#installation) The Bootstrap, TailWind, React and Vue scaffolding provided by Laravel ui+ tw is located in the `algoetech/laravel-uiplustw` Composer package, which may be installed using Composer: ``` composer require algoetech/laravel-uiplustw ``` Once the `algoetech/laravel-uiplustw` package has been installed, you may install the frontend scaffolding using the `ui` Artisan command: ``` // Generate basic scaffolding... php artisan ui bootstrap php artisan ui tailwind php artisan ui vue php artisan ui react // Generate login / registration scaffolding... php artisan ui bootstrap --auth php artisan ui tailwind --auth php artisan ui vue --auth php artisan ui react --auth ``` #### CSS [](#css) Laravel officially supports [Vite](https://laravel.com/docs/vite), a modern frontend build tool that provides an extremely fast development environment and bundles your code for production. Vite supports a variety of CSS preprocessor languages, including SASS and Less, which are extensions of plain CSS that add variables, mixins, and other powerful features that make working with CSS much more enjoyable. In this document, we will briefly discuss CSS compilation in general; however, you should consult the full [Vite documentation](https://laravel.com/docs/vite#working-with-stylesheets) for more information on compiling SASS or Less. #### JavaScript [](#javascript) Laravel does not require you to use a specific JavaScript framework or library to build your applications. In fact, you don't have to use JavaScript at all. However, Laravel does include some basic scaffolding to make it easier to get started writing modern JavaScript using the [Vue](https://vuejs.org) library. Vue provides an expressive API for building robust JavaScript applications using components. As with CSS, we may use Vite to easily compile JavaScript components into a single, browser-ready JavaScript file. ### Writing CSS [](#writing-css) After installing the `algoetech/laravel-uiplustw` Composer package and [generating the frontend scaffolding](#introduction), Laravel's `package.json` file will include the `bootstrap` package to help you get started prototyping your application's frontend using Bootstrap. However, feel free to add or remove packages from the `package.json` file as needed for your own application. You are not required to use the Bootstrap framework to build your Laravel application - it is provided as a good starting point for those who choose to use it. Before compiling your CSS, install your project's frontend dependencies using the [Node package manager (NPM)](https://www.npmjs.org): ``` npm install ``` If you have use the tailwind scaffolding, run this if not skip: ``` npx tailwind init ``` Once the dependencies have been installed using `npm install`, you can compile your SASS files to plain CSS using [Vite](https://laravel.com/docs/vite#working-with-stylesheets). The `npm run dev` command will process the instructions in your `vite.config.js` file. Typically, your compiled CSS will be placed in the `public/build/assets` directory: ``` npm run dev ``` The `vite.config.js` file included with Laravel's frontend scaffolding will compile the `resources/sass/app.scss` SASS file. This `app.scss` file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize the `app.scss` file however you wish or even use an entirely different pre-processor by [configuring Vite](https://laravel.com/docs/vite#working-with-stylesheets). ### Writing JavaScript [](#writing-javascript) All of the JavaScript dependencies required by your application can be found in the `package.json` file in the project's root directory. This file is similar to a `composer.json` file except it specifies JavaScript dependencies instead of PHP dependencies. You can install these dependencies using the [Node package manager (NPM)](https://www.npmjs.org): ``` npm install ``` > By default, the Laravel `package.json` file includes a few packages such as `lodash` and `axios` to help you get started building your JavaScript application. Feel free to add or remove from the `package.json` file as needed for your own application. Once the packages are installed, you can use the `npm run dev` command to [compile your assets](https://laravel.com/docs/vite). Vite is a module bundler for modern JavaScript applications. When you run the `npm run dev` command, Vite will execute the instructions in your `vite.config.js` file: ``` npm run dev ``` By default, the Laravel `vite.config.js` file compiles your SASS and the `resources/js/app.js` file. Within the `app.js` file you may register your Vue components or, if you prefer a different framework, configure your own JavaScript application. Your compiled JavaScript will typically be placed in the `public/build/assets` directory. > The `app.js` file will load the `resources/js/bootstrap.js` file which bootstraps and configures Vue, Axios, jQuery, and all other JavaScript dependencies. If you have additional JavaScript dependencies to configure, you may do so in this file. #### Writing Vue Components [](#writing-vue-components) When using the `laravel/ui` package to scaffold your frontend, an `ExampleComponent.vue` Vue component will be placed in the `resources/js/components` directory. The `ExampleComponent.vue` file is an example of a [single file Vue component](https://vuejs.org/guide/single-file-components) which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications. The example component is registered in your `app.js` file: ``` import ExampleComponent from './components/ExampleComponent.vue'; Vue.component('example-component', ExampleComponent); ``` To use the component in your application, you may drop it into one of your HTML templates. For example, after running the `php artisan ui vue --auth` Artisan command to scaffold your application's authentication and registration screens, you could drop the component into the `home.blade.php` Blade template: ``` @extends('layouts.app') @section('content') @endsection ``` > Remember, you should run the `npm run dev` command each time you change a Vue component. Or, you may run the `npm run watch` command to monitor and automatically recompile your components each time they are modified. If you are interested in learning more about writing Vue components, you should read the [Vue documentation](https://vuejs.org/guide/), which provides a thorough, easy-to-read overview of the entire Vue framework. #### Using React [](#using-react) If you prefer to use React to build your JavaScript application, Laravel makes it a cinch to swap the Vue scaffolding with React scaffolding: ``` composer require laravel/ui // Generate basic scaffolding... php artisan ui react // Generate login / registration scaffolding... php artisan ui react --auth ``` ### Adding Presets [](#adding-presets) Presets are "macroable", which allows you to add additional methods to the `UiCommand` class at runtime. For example, the following code adds a `nextjs` method to the `UiCommand` class. Typically, you should declare preset macros in a [service provider](https://laravel.com/docs/providers): ``` use Laravel\Ui\UiCommand; UiCommand::macro('nextjs', function (UiCommand $command) { // Scaffold your frontend... }); ``` Then, you may call the new preset via the `ui` command: ``` php artisan ui nextjs ``` Contributing ------------ [](#contributing) Welcome contributors License ------- [](#license) Laravel UI+ TW is open-sourced software licensed under the [MIT license](LICENSE.md). ### Health Score 25 — LowBetter than 37% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity8 Limited adoption so far Community20 Small or concentrated contributor base Maturity49 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits 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 ~0 days Total 4 Last Release 836d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/b2113c7230edef88b475c6e441f232f08113c9eb993d7093cff5d64d185115b3?d=identicon)[tairocruiz](/maintainers/tairocruiz) --- Top Contributors [![driesvints](https://avatars.githubusercontent.com/u/594614?v=4)](https://github.com/driesvints "driesvints (132 commits)")[![taylorotwell](https://avatars.githubusercontent.com/u/463230?v=4)](https://github.com/taylorotwell "taylorotwell (93 commits)")[![algoetech](https://avatars.githubusercontent.com/u/136216514?v=4)](https://github.com/algoetech "algoetech (12 commits)")[![GrahamCampbell](https://avatars.githubusercontent.com/u/2829600?v=4)](https://github.com/GrahamCampbell "GrahamCampbell (3 commits)")[![jessarcher](https://avatars.githubusercontent.com/u/4977161?v=4)](https://github.com/jessarcher "jessarcher (3 commits)")[![crynobone](https://avatars.githubusercontent.com/u/172966?v=4)](https://github.com/crynobone "crynobone (3 commits)")[![nunomaduro](https://avatars.githubusercontent.com/u/5457236?v=4)](https://github.com/nunomaduro "nunomaduro (3 commits)")[![Quezler](https://avatars.githubusercontent.com/u/3179271?v=4)](https://github.com/Quezler "Quezler (2 commits)")[![roberto-aguilar](https://avatars.githubusercontent.com/u/5356595?v=4)](https://github.com/roberto-aguilar "roberto-aguilar (2 commits)")[![liamh101](https://avatars.githubusercontent.com/u/3386345?v=4)](https://github.com/liamh101 "liamh101 (2 commits)")[![barryvdh](https://avatars.githubusercontent.com/u/973269?v=4)](https://github.com/barryvdh "barryvdh (2 commits)")[![timacdonald](https://avatars.githubusercontent.com/u/24803032?v=4)](https://github.com/timacdonald "timacdonald (2 commits)")[![iamgergo](https://avatars.githubusercontent.com/u/6567179?v=4)](https://github.com/iamgergo "iamgergo (2 commits)")[![franknystrom15](https://avatars.githubusercontent.com/u/69698261?v=4)](https://github.com/franknystrom15 "franknystrom15 (2 commits)")[![proclame](https://avatars.githubusercontent.com/u/2464413?v=4)](https://github.com/proclame "proclame (2 commits)")[![tommica](https://avatars.githubusercontent.com/u/1391027?v=4)](https://github.com/tommica "tommica (1 commits)")[![asherawelan](https://avatars.githubusercontent.com/u/5789330?v=4)](https://github.com/asherawelan "asherawelan (1 commits)")[![ashkanfekridev](https://avatars.githubusercontent.com/u/31134156?v=4)](https://github.com/ashkanfekridev "ashkanfekridev (1 commits)")[![balping](https://avatars.githubusercontent.com/u/5840038?v=4)](https://github.com/balping "balping (1 commits)")[![cino](https://avatars.githubusercontent.com/u/2735602?v=4)](https://github.com/cino "cino (1 commits)") --- Tags laraveluilaravel ui tailwind ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/algoetech-laravel-ui-plustw/health.svg) ``` [![Health](https://phpackages.com/badges/algoetech-laravel-ui-plustw/health.svg)](https://phpackages.com/packages/algoetech-laravel-ui-plustw) ``` ### Alternatives [laravel/ui Laravel UI utilities and presets. 2.7k134.9M601](/packages/laravel-ui)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[laravel/breeze Minimal Laravel authentication scaffolding with Blade and Tailwind. 3.0k31.3M148](/packages/laravel-breeze)[tightenco/jigsaw Simple static sites with Laravel's Blade. 2.2k438.5k29](/packages/tightenco-jigsaw)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[area17/blast Storybook for Laravel Blade 308664.1k](/packages/area17-blast) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)