Slate

Slate is a UI kit for Laravel apps built around Blade and Livewire. It gives developers reusable components and ready-made interface blocks for common application screens, making it easier to build consistent product interfaces without assembling every element from scratch.

The kit is designed for teams that want to stay close to Laravel’s Blade workflow while still having a modern, customizable design system. It uses anonymous Blade components, OKLCH design tokens, Tailwind CSS v4, and Livewire-ready form elements.

Key Features

Blade-First Structure

Build interfaces using Blade without adding a heavy abstraction layer.

Slate uses anonymous Blade components, making it straightforward for Laravel teams to compose and reuse interface elements within their existing workflow.

OKLCH Design Tokens

Use token-based theming for consistent styling across an application.

The design system is built around OKLCH color tokens, giving teams a structured foundation for customizing the appearance of their components.

Tailwind CSS v4

Use Tailwind CSS v4 as the styling foundation.

This keeps the UI kit aligned with a familiar utility-first workflow while allowing developers to customize the provided components and themes.

Dark Mode

Switch between light and dark interfaces using the built-in theme system.

Dark mode is included as part of the overall design system rather than requiring a separate implementation.

Livewire Forms

Use interactive form components designed for Livewire applications.

The form elements include support for:

• Validation states
• Loading states
• Interactive form behavior

This makes the kit useful for Laravel applications that rely on Livewire for dynamic interfaces.

50+ UI Components

Choose from a broad collection of reusable components covering common application interface needs.

The component library includes elements for:

• Forms
• Layout
• Overlays
• Feedback
• Other common application UI patterns

Ready-Made Blocks

Start common application pages from prebuilt interface blocks.

Slate includes blocks for areas such as:

• Login
• Settings
• Pricing
• App shell

These provide a faster starting point for assembling complete application screens.

Live Documentation and Examples

Preview components before adding them to a project.

The documentation includes:

• Live previews
• Search
• Themes
• Blocks
• Examples
• Changelog

This makes it easier to evaluate the available components and understand how the kit fits into an existing Laravel application.

Built for Laravel UI Development

Slate combines reusable Blade components, Livewire-ready forms, design tokens, and complete interface blocks into a UI system for Laravel applications.

Key benefits include:

• Build interfaces with Blade
• Use anonymous Blade components
• Create reusable UI elements
• Customize themes with OKLCH tokens
• Use Tailwind CSS v4
• Support dark mode
• Build interactive Livewire forms
• Handle validation states
• Handle loading states
• Choose from 50+ components
• Use ready-made application blocks
• Preview components through live documentation
• Browse examples and themes
• Follow updates through the changelog

Built For

• Laravel Developers
• PHP Developers
• SaaS Teams
• Startup Teams
• Product Developers
• Web Application Developers
• Frontend Developers Working With Laravel

Common Use Cases

• Building Laravel dashboards
• Creating admin interfaces
• Developing SaaS applications
• Building product interfaces
• Creating authentication screens
• Building settings pages
• Creating pricing pages
• Developing application shells
• Building Livewire forms
• Creating consistent design systems
• Adding dark mode to Laravel applications
• Prototyping Laravel interfaces quickly

Why It Matters

Building a Laravel application interface from scratch means repeatedly creating forms, layouts, feedback states, overlays, and other common UI patterns. Slate provides these pieces as reusable components and blocks, giving teams a structured starting point for product interfaces.

Its Blade-first approach is particularly useful for developers who want to remain within the Laravel view layer. Anonymous components keep the composition model lightweight, while Tailwind CSS v4 and OKLCH design tokens provide a foundation for customization.

The Livewire integration also makes the kit practical for applications that depend on interactive forms. Validation and loading states are already accounted for, reducing the amount of interface work needed when building dynamic screens.

Build Laravel Interfaces Faster

Use Slate’s Blade and Livewire components, design tokens, and ready-made blocks to build polished Laravel dashboards, admin areas, and product interfaces while staying within a familiar Blade-first workflow.