Laravel UI Bootstrap Alternative
Slate is the perfect replacement for Laravel UI's Bootstrap scaffolding.
Why Migrate?
Laravel UI Bootstrap provided:
- Bootstrap 4 scaffolding
- Authentication views
- Basic UI components
But it had limitations:
- Deprecated - No longer maintained
- Bootstrap 4 - Outdated version
- Scaffolding only - Not reusable components
- Limited customization - Hard to modify
Slate Advantages
- Modern - Tailwind CSS v4
- Active - Regularly updated
- Components - Reusable, not scaffolding
- Customizable - Full control
- Blade-first - No JavaScript required
Migration Guide
Step 1: Install Slate
terminal
composer require electrik/slate
Step 2: Replace Bootstrap Classes
Before (Bootstrap):
example.blade.php
<div class="card">
<div class="card-header">Title</div>
<div class="card-body">Content</div>
</div>
After (Slate):
example.blade.php
<x-slate::card>
<x-slate::card-header>
<x-slate::card-title>Title</x-slate::card-title>
</x-slate::card-header>
<x-slate::card-content>Content</x-slate::card-content>
</x-slate::card>
Step 3: Replace Form Elements
Before (Bootstrap):
example.blade.php
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control">
</div>
After (Slate):
example.blade.php
<x-slate::label>Email</x-slate::label>
<x-slate::input type="email" />
Step 4: Replace Buttons
Before (Bootstrap):
example.blade.php
<button class="btn btn-primary">Submit</button>
After (Slate):
example.blade.php
<x-slate::button variant="primary">Submit</x-slate::button>
Component Mapping
| Bootstrap | Slate |
|---|---|
.card |
<x-slate::card> |
.btn |
<x-slate::button> |
.form-control |
<x-slate::input> |
.form-select |
<x-slate::select> |
.alert |
<x-slate::alert> |
.badge |
<x-slate::badge> |
.modal |
<x-slate::modal> |
AdminLTE Alternative
If you were using AdminLTE with Laravel UI:
- Remove AdminLTE - No longer needed
- Use Slate components - Modern, clean design
- Customize as needed - Full control over styling
Benefits
- Smaller bundle - Tailwind CSS is more efficient
- Better performance - No jQuery dependency
- Modern design - Up-to-date UI patterns
- Easier maintenance - Blade components, not scaffolding