Slate: shadcn-style UI for Laravel — in Blade, not React

#laravel #tailwindcss #livewire #ai

If you’ve ever wanted shadcn-like composition in Laravel and ended up with React in a Blade app (or a paste tree of components you now own forever), that’s the gap Slate fills.

Slate (electrik/slate) is a shadcn-inspired Blade UI kit: anonymous components, Tailwind CSS v4, owned design tokens, dark mode, Livewire-aware forms. One Composer package. No npx add. No React.

Status: 3.x is alpha (3.0.0-alpha.4). The surface is there; we’re hardening a11y and polish before stable. Fine to try, expect edges.

Why Blade, not another React port

Most “Laravel UI” answers today are either:

Admin frameworks (great if you want a panel, heavy if you want a product UI), or
Copy-paste / CLI kits that dump files into your app and drift from upstream.

Slate is neither. You install it, import CSS, and use tags:

composer require electrik/slate:^3.0@alpha

@import 'tailwindcss';
@import '../../vendor/electrik/slate/resources/css/slate.css';

<x-slate::button variant="default">Save</x-slate::button>

<x-slate::input
    label="Email"
    type="email"
    wire:model="email"
/>

Theming is tokens you own (--slate-primary, background, radius, semantics) — not a third-party theme package bolted on. Dark mode is first-class, not an afterthought.

What you get

Anonymous <x-slate::*> components (no PHP class soup for every button)
Forms that respect Livewire + validation
Overlays (dialog, sheet, drawer) with real a11y defaults
Blocks gallery for login, settings, pricing, app shell — copy patterns, don’t invent trees
Docs + markdown + llms.txt so agents stop inventing React APIs in Blade projects

Docs: slate.electrik.dev

Components: slate.electrik.dev/components

Blocks: slate.electrik.dev/blocks

AI without the wrong stack

Agents love shadcn. They also love inventing <Button /> in a Laravel repo.

Slate ships:

llms.txt
Read-only MCP (docs + Blade source — it does not install packages)

Cursor remote MCP:

{
  "mcpServers": {
    "slate": {
      "url": "https://mcp.slate.electrik.dev"
    }
  }
}

Or local: npx -y @electrik/slate-mcp

More: AI & MCP

Not for you if…

You need React/Vue components
You want a shadcn-style add CLI that copies files into the app
You want a full SaaS/admin starter

Slate is a UI kit, not a product scaffold.

Try it

composer require electrik/slate:^3.0@alpha

Packagist: electrik/slate
GitHub: electrikhq/slate
License: MIT

If you build something with it — or hit a sharp edge in alpha — open an issue. That’s the useful feedback right now.

DEV Community