Slate

API freeze

Slate 3.x is still alpha, but the contracts below are frozen for rename. Treat them as stable for apps and agents. Other surfaces may still move and are marked experimental when needed.

Do not rename these props, event fields, or CSS variables without a major version.

Progressive form props (frozen)

These props auto-compose field / field-label / field-description / field-error on form controls:

Prop Role
label Accessible control label
description Help text under the control
errorMessage Explicit error copy (alongside Livewire/$errors)
name / errorKey Validation key wiring
showError Whether to render the error slot (where supported)

Frozen on: input, textarea, select, checkbox, switch, radio, radio-group, file-input.

help remains a deprecated alias of description on text-like controls — prefer description.

example.blade.php
<x-slate::input
    label="Email"
    type="email"
    wire:model="email"
    description="We will never share your email."
    errorMessage="Please enter a valid email address."
/>

Toast event shape (frozen)

Event slate-toast on window
Listen <x-slate::toaster /> (@slate-toast.window)

detail fields (frozen names):

Field Type Notes
id string? Auto-generated when omitted
title string? Primary text
description string? Secondary text
variant string? default | destructive | success | warning | info
duration number? ms; 0 = no auto-dismiss; default from toaster duration
script.js
window.dispatchEvent(new CustomEvent('slate-toast', {
  detail: {
    title: 'Saved',
    description: 'Your changes were stored.',
    variant: 'success',
    duration: 4000,
  },
}))

Action buttons stay compositional (toast-action) — not part of the event payload.

Design tokens (frozen names)

Do not rename these --slate-* variables. Values may still be tuned before stable.

Group Tokens
Core --slate-radius, --slate-background, --slate-foreground, --slate-card, --slate-card-foreground, --slate-popover, --slate-popover-foreground
Brand --slate-primary, --slate-primary-foreground, --slate-secondary, --slate-secondary-foreground, --slate-muted, --slate-muted-foreground, --slate-accent, --slate-accent-foreground
Status --slate-destructive, --slate-destructive-foreground, --slate-success, --slate-success-foreground, --slate-warning, --slate-warning-foreground, --slate-info, --slate-info-foreground
Chrome --slate-border, --slate-input, --slate-ring
Sidebar --slate-sidebar, --slate-sidebar-foreground, --slate-sidebar-accent, --slate-sidebar-accent-foreground, --slate-sidebar-border, --slate-sidebar-ring

Full tables: Design tokens. Playground: Themes.

Experimental

Still free to change before stable 3.0.0:

  • Calendar / combobox / chart depth (behavior beyond the current markup)
  • Nested overlay stacking edge cases beyond scroll-lock + topmost Escape
  • MCP tool names and response shapes (@electrik/slate-mcp alpha)
  • Block gallery markup on the docs site

When a page or prop is experimental, docs say so explicitly. Prefer frozen contracts when generating Blade for consumers.

Last updated .