Introduction

Slate UI Kit is a set of anonymous Blade components for Laravel — built with Tailwind CSS v4 and Slate-owned design tokens.

3.x is a ground-up rebuild focused on getting the foundation right:

• Anonymous Blade components — no PHP classes, pure templates you can copy and customize
• OKLCH tokens — --slate-* CSS variables mapped into Tailwind theme colors
• Native-first forms — accessible inputs, selects, checkboxes, switches, and radios
• Livewire-aware — validation errors and loading states without tight coupling
• Alpine where needed — dark mode toggle, dialogs, and other interactive overlays

The current alpha ships core primitives: actions, form controls, field helpers, card, alert, avatar, skeleton, dialog, and more. Additional surfaces continue to land on 3.x.

Components use Tailwind semantic utilities like bg-primary, text-muted-foreground, and border-input. Under the hood, those map to --slate-* variables you can override.

Use component variants instead of picking colors directly:

<x-slate::button variant="default">Save</x-slate::button>
<x-slate::button variant="destructive">Delete</x-slate::button>
<x-slate::button variant="outline">Cancel</x-slate::button>

Wrap controls with the field system for labels, descriptions, and errors:

<x-slate::field name="email">
    <x-slate::field-label for="email">Email</x-slate::field-label>
    <x-slate::input id="email" name="email" type="email" />
    <x-slate::field-error name="email" />
</x-slate::field>

• PHP 8.3+
• Laravel 12.0+
• Tailwind CSS v4
• Alpine.js (bundled with Livewire; required for dark-mode-toggle)

<div class="flex flex-wrap gap-2">
    <x-slate::button>Default</x-slate::button>
    <x-slate::button variant="secondary">Secondary</x-slate::button>
    <x-slate::button variant="outline">Outline</x-slate::button>
    <x-slate::button variant="destructive">Destructive</x-slate::button>
</div>

• Installation
• Design tokens
• Components