Laravel 12 New Starter Kits | TutorialDev

Hey! I will show you new starter kits in laravel 12 in this article today. 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.

So, let’s follow the steps below to install and customize starter kits.

Install Laravel Installer

If Laravel command is already installed in the system, you may skip. Otherwise install PHP and the Laravel installer 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

If PHP , Composer, and the Laravel installer is installed , 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.

Read More Blog Posts:

Simple Laravel 12 PDF Generator Tutorial Using DomPDF

Laravel 12 Form Validation Tutorial Example | TutorialDev

Laravel 12 File Upload Tutorial Example Full Guide

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

INTO

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’;