Docs
Estimated time: 6 minutes
Difficulty: Beginner

# Layout System

Estimated time: 6 minutes
Difficulty: Beginner

LaraCoreKit uses a modular layout system where each module can define its own layouts while sharing the core design tokens, navigation, and assets.

Core Layout

The primary app layout lives in the Core module:

modules/Core/views/layouts/app.blade.php
<!DOCTYPE html>
<html
    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
    dir="{{ in_array(app()->getLocale(), ['ar']) ? 'rtl' : 'ltr' }}"
    class="{{ session('theme', 'dark') }}"
>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body class="min-h-screen bg-gray-50 dark:bg-gray-950">

    {{-- Navigation --}}
    <x-navbar />

    {{-- Locale Switcher --}}
    @livewire('locale-switcher')

    {{-- Page Content --}}
    <main>
        {{ $slot }}
    </main>

    {{-- Footer --}}
    <x-footer />

    @livewireScripts
</body>
</html>

Extending the Layout

With Livewire full-page components

class BlogList extends Component
{
    public function render()
    {
        return view('blog::livewire.blog-list')
            ->layout('core::layouts.app', [
                'title' => 'Blog — ' . config('app.name'),
            ]);
    }
}

With Blade extends

@extends('core::layouts.app', ['title' => 'My Page'])

@section('content')
    <h1>My page content</h1>
@endsection

Module-Specific Layouts

Modules can define their own layouts:

modules/Blog/views/layouts/blog.blade.php
@extends('core::layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-12">
    <x-breadcrumbs :items="$breadcrumbs ?? []" />

    <article class="prose dark:prose-invert max-w-none">
        {{ $slot }}
    </article>

    <x-blog-sidebar />
</div>
@endsection

Guest Layout (Auth Pages)

modules/Auth/views/layouts/guest.blade.php

A centered, minimal layout for login/register pages with no navigation.

Named Slots

{{-- In the layout file --}}
<header>
    {{ $header ?? '' }}
</header>

<main>{{ $slot }}</main>

<footer>
    {{ $footer ?? '' }}
</footer>
{{-- When using the layout --}}
<x-layouts.app>
    <x-slot name="header">
        <h1>Page Title</h1>
    </x-slot>

    <p>Page content here</p>
</x-layouts.app>

Asset Pipeline

Assets are compiled with Vite:

resources/
├── css/
│   └── app.css       ← Main CSS (TailwindCSS v4)
└── js/
    └── app.js        ← Main JS (Alpine.js, Livewire)

Development:

npm run dev    # Hot-reload

Production:

npm run build  # Minified assets

Next Steps

UI Showcase →