Laravel Breeze CRUD | MongoDB | Laravel 11 Livewire 3 CRUD with Alpine JS & Tailwind CSS Example

Setup Fresh Laravel 11 Project and Install Breeze

composer create-project --prefer-dist laravel/laravel breeze
cd breeze
php artisan breeze:install
php artisan migrate

Creating a Components for Table Elements

php artisan make:component tables.table --view
php artisan make:component tables.header --view
php artisan make:component tables.row --view
php artisan make:component tables.cell --view

Path:- resources/views/components/tables/table.blade.php

<div class="align-middle min-w-full overflow-x-auto shadow overflow-hidden sm:rounded-lg">
    <table class="min-w-full divide-y divide-gray-200">
        @if (!empty($header))
            <thead>
                <tr>
                    {{ $header }}
                </tr>
            </thead>
        @endif
        <tbody class="bg-white divide-y divide-gray-200">
            {{ $body ?? '' }}
        </tbody>
        @if (!empty($footer))
            <tfoot class="table-foot">
                {{ $footer }}
            </tfoot>
        @endif
    </table>
</div>

Path:- resources/views/components/tables/header.blade.php

@props([
    'sortable' => null,
    'direction' => null,
])

<th {{ $attributes->merge(['class' => 'px-6 py-3 bg-gray-50'])->only('class') }}>

    @unless ($sortable)
        <span class="text-left text-xs leading-4 font-medium…