| Install | |
|---|---|
composer require onelegstudios/starter-kit |
|
| PHP: | ^8.2 |
This project extends laravel/livewire-starter-kit by providing enhanced developer experience and local development tools.
It is intended for teams seeking a Laravel + Livewire solution, offering a practical default setup that runs quickly, tests easily, and is highly customizable.
This starter kit adopts the Livewire 4 view-first structure, organizing code into dedicated pages, layouts, and components folders.
resources/views/pages.resources/views/components, grouping them by domain (for example, (for example components/settings/profile/* and components/settings/two-factor/*).Experience enhanced usability and customization with this starter kit. It introduces several practical improvements over the upstream default. Enjoy customizable dark mode controls, including a button, a dropdown, and a visual toggle switch. The toggle switch comes in two variants. One displays text labels, while the other uses only an icon. Both variants are ideal for a settings page. The kit also supports profile picture upload, replacement, and removal from settings. Mail settings compatible with MailPint. It switches to Lucide icons for a cleaner visual style and enables MustVerifyEmail by default.
It also adds focused development and local tooling packages to improve workflow. barryvdh/laravel-ide-helper improves editor intelligence, fruitcake/laravel-debugbar helps inspect requests and performance during development, soloterm/soloruns multiple commands simultaneously to aid local development. We made it easy to enable the local HTTP server and run the mailpint server. All the commands needed to run your application live are available through a single artisan command. spatie/laravel-login-link simplifies secure local login and testing flows.
laravel new --using=onelegstudios/starter-kit
The resources/views/components/layouts/dark-mode.blade.php component provides a reusable UI for switching Flux appearance between light, dark, and system.
Use it in Blade as:
<x-layouts.dark-mode />
Supported props:
type (button | dropdown | bar | iconbar, default: button)align (default: start, used by dropdown)position (default: bottom, used by dropdown)class)Examples:
{{-- Default cycle button (light -> dark -> system) --}}
<x-layouts.dark-mode />
{{-- Dropdown menu variant --}}
<x-layouts.dark-mode type="dropdown" align="end" position="bottom" class="max-lg:hidden" />
{{-- Segmented control with labels --}}
<x-layouts.dark-mode type="bar" class="w-full" />
{{-- Segmented control with icons only --}}
<x-layouts.dark-mode type="iconbar" />
Notes:
$flux.appearance and $flux.dark) to be available.type="bar" and type="iconbar" are useful on settings/profile pages where users expect persistent display controls.The original upstream starter kit documentation is available at:
This project is open-sourced software licensed under the MIT license.