ArtisanPack UI: How the Livewire Starter Kit Eliminates Setup Friction in Laravel

,
An isometric illustration on a blue background shows a tablet with a video player on the screen, featuring a play button and progress bar. Above it is a search bar, to the left a pink "#1" tag, and to the right a stack of three video thumbnails. The color palette is a limited scheme of blue, pink, and yellow.

The Laravel starter kits are a fantastic way for developers to quickly get started building their apps.

You don’t have to worry about setting up authentication and all the views that come with it, just to get to the point where you can actually start the app.

Instead, once it’s done installing, you can jump right in to building an awesome app.

And the added support for custom starter kits means anyone can create one for themselves or share it with the wider world, making getting started even easier.

Which led me to one question: what if I build a Laravel starter kit for the ArtisanPack UI library?

Why Create a Laravel Starter Kit

One of the most underrated parts of Laravel 12 from last year was the ability to create and use a custom starter kit when running laravel new.

Previously, you could only choose from a particular set of official starter kits from Laravel itself.

But Laravel 12 and the new Laravel installer introduced a --using flag for laravel new, allowing anyone to create and use a third-party/community starter kit.

So, seeing that, I started thinking about creating a starter kit for ArtisanPack UI.

I thought it would be pretty cool if someone could use the starter kit to install all the ArtisanPack UI packages they wanted directly from the command line.

Now it was time to turn the idea into something a little bit more real.

The Plan for Creating the Starter Kit

The biggest challenge in planning the starter kit was determining how a user would use it during the Laravel new process.

At the time I was planning it, custom starter kits were a new feature, and documentation was scarce. It took a lot of digging and searching around to figure out just how to do it. Heck, even Gemini had a hard time coming up with the correct answer.

I finally figured out that the starter kit needed to be pushed to Packagist as a package so that a developer could use something like --using=artisanpack-ui/livewire-starter-kit when running laravel new to create their new app.

Once I had that information, the rest was simple.

I would take a base Laravel installation, replace Flux with the ArtisanPack UI Livewire UI Components package, and add a post-installation command to let developers easily install optional ArtisanPack UI packages and get up and running with the app.

Now it was time to complete the work.

Needing to Complete All of the ArtisanPack UI Packages

But before I could start creating the starter kit, I needed to finish the initial set of ArtisanPack UI packages. And that took quite some time.

Across all the packages, it took several months before I was in a position to work on the starter kit.

But once those were out of the way, it was time to make the starter kit a thing.

Creating the Starter Kit

Once I started building the starter kit, it turned out to be much faster than I expected.

By this time, I started using Claude, and Claude Code was able to easily swap out the Flux UI components with the ArtisanPack UI Livewire UI Components package, getting it to roughly 80 percent of the way there in almost no time.

But there were some custom features that I still needed to add.

Generating Theme Colors

The Livewire UI Components package is a fork of Mary UI, which is itself a Laravel-based wrapper around Daisy UI.

I knew I wanted developers to be able to easily generate theme colors for their new app from the start, so they wouldn’t have to deal with that later in the project.

Fortunately, the Livewire UI Components package has an artisan command to generate the necessary theme files. And getting that to run after installing the Livewire Starter Kit and the required packages was a breeze.

If you create a new app using the starter kit, you’ll be prompted to enter your app’s primary, secondary, and accent colors. It will generate the necessary CSS variables for you, including contrasting white or black colors for your specified colors, adding an accessibility layer that works out of the box.

Selecting Optional Packages

Finally, I wanted to add a way for developers to easily add optional ArtisanPack UI packages to their new app from the start.

One of the things I want to do with everything I do for ArtisanPack UI is reduce the friction developers (including, and especially, myself) can encounter when creating awesome apps. And making the other ArtisanPack UI packages available right from the start is a great way to reduce more friction.

Thankfully, Claude Code was up to the task with this one, creating a post-install command that allowed developers to choose which Composer and NPM packages to install, then install them at the end of the setup process.

Now you can start your new app with the CMS Framework, Media Library, Hooks, and any other installed packages without running additional composer require commands.

The Future for the Starter Kit

The future of the Livewire Starter Kit is promising.

I still find bugs, which is frustrating because the only way I can test the installation process for optional packages is to release a version on Packagist. Hopefully, I can eventually iron out all the bugs.

Once that’s done, the biggest challenge will be ensuring that new packages are added to the installation process and that the required core packages are kept up to date.

And then, outside of that, I want to add a feature during installation that lets you select a website or app type, and have the necessary packages installed for you. The eventual goal is to reach a point where it can handle much of the mundane, repetitive work developers face when building a new app or website.

Overall, I feel pretty good about where the Livewire Starter Kit is headed.

Leave a Reply

Your email address will not be published. Required fields are marked *