Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Laravel UI Auth

Slate works seamlessly with Laravel's modern authentication solutions.

Laravel Breeze

Breeze provides authentication scaffolding with Tailwind CSS.

Installation
terminal 
composer require laravel/breeze --dev
php artisan breeze:install

Using Slate Components

Replace Breeze's default components with Slate:

example.blade.php 
{{-- resources/views/auth/login.blade.php --}}
<x-slate::card>
    <x-slate::card-header>
        <x-slate::card-title>Login</x-slate::card-title>
    </x-slate::card-header>
    <x-slate::card-content>
        <form method="POST" action="{{ route('login') }}">
            @@csrf
            <x-slate::input type="email" name="email" required />
            <x-slate::input type="password" name="password" required />
            <x-slate::button type="submit">Login</x-slate::button>
        </form>
    </x-slate::card-content>
</x-slate::card>

Laravel Jetstream

Jetstream provides teams, API, and more.

Installation
terminal 
composer require laravel/jetstream
php artisan jetstream:install livewire

Customizing Views

Publish Jetstream views and replace with Slate components:

terminal 
php artisan vendor:publish --tag=jetstream-views

Then customize in resources/views/vendor/jetstream/.

Laravel Fortify

Fortify provides backend authentication logic.

Installation
terminal 
composer require laravel/fortify
php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"

Creating Views

Since Fortify doesn't provide views, use Slate to build them:

example.blade.php 
<x-slate::card>
    <x-slate::card-content>
        <form method="POST" action="/login">
            @@csrf
            <x-slate::input type="email" name="email" />
            <x-slate::input type="password" name="password" />
            <x-slate::button type="submit">Login</x-slate::button>
        </form>
    </x-slate::card-content>
</x-slate::card>

Email Verification

Slate components work great for email verification pages:

example.blade.php 
<x-slate::card>
    <x-slate::card-content>
        <p>Please verify your email address.</p>
        <form method="POST" action="{{ route('verification.send') }}">
            @@csrf
            <x-slate::button type="submit">Resend Verification Email</x-slate::button>
        </form>
    </x-slate::card-content>
</x-slate::card>

Password Reset

Password reset forms with Slate:

example.blade.php 
<x-slate::card>
    <x-slate::card-header>
        <x-slate::card-title>Reset Password</x-slate::card-title>
    </x-slate::card-header>
    <x-slate::card-content>
        <form method="POST" action="{{ route('password.update') }}">
            @@csrf
            <input type="hidden" name="token" value="{{ $token }}">
            <x-slate::input type="email" name="email" />
            <x-slate::input type="password" name="password" />
            <x-slate::input type="password" name="password_confirmation" />
            <x-slate::button type="submit">Reset Password</x-slate::button>
        </form>
    </x-slate::card-content>
</x-slate::card>

Best Practices
  1. Consistent styling - Use Slate components throughout
  2. Accessibility - Slate components include ARIA attributes
  3. Dark mode - Works automatically with Slate
  4. Customization - Publish and customize as needed
Last updated .