Skip to main content

​
Overview

LaraCMS provides extensive customization options for views, themes, and styling. The application uses Tailwind CSS v4, Livewire Flux components, and Blade templates for a modern, responsive design.

​
View Structure

LaraCMS organizes views in a structured hierarchy: 
resources/views/
├── components/
│   ├── layouts/
│   │   ├── app.blade.php
│   │   ├── admin.blade.php
│   │   ├── auth.blade.php
│   │   └── main.blade.php
│   ├── table/
│   ├── admin/
│   └── forms/
├── livewire/
│   ├── admin/
│   ├── auth/
│   └── actions/
└── pages/

​
Layout Components

The main layout file is located at resources/views/components/layout.blade.php and includes:
  • Navigation bar with authentication links
  • Main content area using Blade slots
  • Footer with social links and site information
  • Livewire integration with @livewireStyles and @livewireScripts

​
Styling System

​
Tailwind CSS Configuration

LaraCMS uses Tailwind CSS v4 with custom theming. The main stylesheet is located at resources/css/app.css: 
@import "tailwindcss";
@import "../../vendor/livewire/flux/dist/flux.css";
@import "../assets/fontawesome/css/fontawesome.css";
@import "../assets/fontawesome/css/brands.css";
@import "../assets/fontawesome/css/solid.css";

@source "../views";
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

@custom-variant dark (&:where(.dark, .dark *));

​
Custom Theme Variables

Define custom color schemes in your app.css: 
@theme {
    --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

    --color-zinc-50: #fafafa;
    --color-zinc-100: #f5f5f5;
    --color-zinc-200: #e5e5e5;
    --color-zinc-300: #d4d4d4;
    --color-zinc-400: #a3a3a3;
    --color-zinc-500: #737373;
    --color-zinc-600: #525252;
    --color-zinc-700: #404040;
    --color-zinc-800: #262626;
    --color-zinc-900: #171717;
    --color-zinc-950: #0a0a0a;

    --color-accent: var(--color-neutral-800);
    --color-accent-content: var(--color-neutral-800);
    --color-accent-foreground: var(--color-white);
}

​
Dark Mode

Dark mode theming is implemented using custom variants: 
@layer theme {
    .dark {
        --color-accent: var(--color-white);
        --color-accent-content: var(--color-white);
        --color-accent-foreground: var(--color-neutral-800);
    }
}

​
Customizing Views

​
Creating Custom Blade Components

Blade components are located in resources/views/components/. Common components include:
  • table.blade.php - Reusable table component
  • button.blade.php - Button component with variants
  • modal.blade.php - Modal dialogs
  • app-logo.blade.php - Application logo

​
Example: Customizing the Table Component

The table component (resources/views/components/table.blade.php) can be customized: 
<x-table>
    <x-slot name="advancedheader">
        <!-- Custom header content -->
    </x-slot>

    <x-slot name="head">
        <x-table.heading>Column 1</x-table.heading>
        <x-table.heading>Column 2</x-table.heading>
    </x-slot>

    <x-slot name="body">
        @foreach ($items as $item)
            <x-table.row>
                <x-table.cell>{{ $item->name }}</x-table.cell>
            </x-table.row>
        @endforeach
    </x-slot>
</x-table>

​
Livewire Flux Components

LaraCMS uses Livewire Flux UI components with custom styling: 
[data-flux-field] {
    @apply grid gap-2;
}

[data-flux-label] {
    @apply !mb-0 !leading-tight;
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}

​
Using Flux Components

Flux components are available throughout the application: 
<flux:button href="{{ route('admin.users.create') }}" icon="user-plus">
    Add User
</flux:button>

<flux:button wire:click="deleteUser" variant="danger">
    Delete
</flux:button>

​
Vite Configuration

Asset compilation is handled by Vite (vite.config.js): 
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [`resources/views/**/*`],
        }),
        tailwindcss(),
    ],
    server: {
        cors: true,
    },
});

​
Customization Best Practices

​
1. Override Layouts

Create custom layouts by extending base layouts: 
@extends('components.layout')

@section('title', 'Custom Page')

@section('content')
    <!-- Your custom content -->
@endsection

​
2. Use Component Slots

Leverage Blade component slots for flexible layouts: 
<x-custom-component>
    <x-slot name="header">
        Custom Header
    </x-slot>
    
    Main content
</x-custom-component>

​
3. Extend Tailwind Classes

Add custom utility classes in your app.css: 
@layer components {
    .btn-primary {
        @apply bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600;
    }
}

​
4. Customize Livewire Views

Publish and modify Livewire component views: 
php artisan livewire:publish --views

​
FontAwesome Integration

LaraCMS includes FontAwesome icons: 
<i class="fab fa-github"></i>
<i class="fas fa-envelope"></i>
<i class="fab fa-twitter"></i>
Customize the navigation bar in resources/views/components/layout.blade.php: 
<nav class="bg-gray-800/50 backdrop-blur-sm fixed w-full z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <!-- Logo -->
            <a href="{{ url('/') }}" class="text-2xl font-bold text-purple-500">
                {{ config('app.name') }}
            </a>
            
            <!-- Navigation items -->
            <!-- Auth buttons -->
        </div>
    </div>
</nav>
The footer includes social links and contact information: 
<footer class="bg-gray-800 border-t border-gray-700 mt-16">
    <div class="max-w-7xl mx-auto px-4 py-12">
        <!-- Footer content -->
    </div>
</footer>

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us