Laravel 12 NEW Starter Kits

In this post, I will show you new starter kits in laravel 12. I will walk you through the installation process and customization options. Laravel 12 offers starter kits with support for React, Vue, and Livewire, all designed using Tailwind CSS.

Let's see the following steps to install and costimize starter kits.

Install Laravel Installer

If you already have the Laravel command installed on your system, you can skip this step. If not, you can install PHP and the Laravel installer on your system using the commands below.

Linux/Ubuntu

/bin/bash -c "$(curl -fsSL https://php.new/install/linux/8.4)"

Windows

# Run as administrator...
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://php.new/install/windows/8.4'))

MacOS

/bin/bash -c "$(curl -fsSL https://php.new/install/mac/8.4)"

If you already have PHP and Composer installed, you may install the Laravel installer via Composer:

composer global require laravel/installer

After install laravel installer you can check the laravel command to run your terminal:

laravel

Create an Laravel 12 Application

Once you have installed PHP, Composer, and the Laravel installer, you can create a new Laravel app. The installer will ask you to choose a testing framework, database, and starter kit.

Linux/Ubuntu

laravel new example-app

Next, you will see a list of starter kits to choose from. In this example, I will select React and authentication provider. let's see the screenshot:

Default Overview of Laravel 12

You will see the default Laravel 12 pages for login, register, dashboard, and settings. Let's take a look!

Landing Page:

Register Page:

Login Page:

Dashboard Page:

Settings Page:

Customize Laravel Starter Kit

By default, the dashboard uses a left sidebar. You can also use a header with a menu, like in the old design. To do this, make the following change in the file:

resources/js/layouts/app-layout.tsx

import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
INTO
import AppLayoutTemplate from '@/layouts/app/app-header-layout';

you will see the layout:

You can change the dashboard variant:

resources/js/components/app-sidebar.tsx

<Sidebar collapsible="icon" variant="inset">
INTO
<Sidebar collapsible="icon" variant="floating">

you will see the layout:

You can change the register page design:

resources/js/layouts/auth-layout.tsx

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
INTO
import AuthLayoutTemplate from '@/layouts/auth/auth-card-layout';

you will see the layout:

resources/js/layouts/auth-layout.tsx

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
INTO
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

you will see the layout:

I hope guys you love the branch new laravel 12 starter kits.