README

Slate UI Kit is a set of beautiful anonymous blade components built using tailwindcss for your next Laravel project.

✨ Features

🎨 57 Components - Complete component library
🎯 Zero PHP Color Logic - All colors controlled via CSS variables
🌙 Dark Mode - Built-in dark mode support with automatic variable switching
♿ Accessible - WCAG 2.1 AA compliant with proper ARIA attributes
🚀 Tailwind CSS v4 - Using latest Tailwind with CSS variables
📦 Anonymous Components - Pure Blade templates, no PHP classes
🎨 Self-Contained - Everything in the package, minimal client configuration
⚡ Alpine.js - Interactive components using Alpine.js (standard in Laravel)
🎨 Semantic Colors - success, warning, info, error, danger color system

📋 Requirements

PHP 8.1+
Laravel 10.0+ or 11.0+ or 12.0+
Tailwind CSS v4
Alpine.js (for interactive components - usually included in Laravel apps)

🚀 Installation

Step 1: Install via Composer

composer require electrik/slate

Step 2: Run Installation Command

php artisan slate:install

This command will:

Copy slate.css to resources/css/slate.css
Add @import './slate.css'; to your app.css (after @import 'tailwindcss';)
Add @source directive to scan Slate components

Note: The installation command automatically configures your app.css file. No manual Tailwind config changes needed when using Tailwind CSS v4!

Step 3: Build Assets

npm run build

That's it! Slate uses CSS variables and Tailwind v4's @theme system, so no tailwind.config.js changes are required.

📖 Usage

Basic Example

<x-slate::button>Click me</x-slate::button>

With Variants

<x-slate::button variant="success">Save</x-slate::button>
<x-slate::button variant="warning">Warning</x-slate::button>
<x-slate::button variant="error">Error</x-slate::button>
<x-slate::button variant="danger">Delete</x-slate::button>
<x-slate::button variant="outline">Cancel</x-slate::button>
<x-slate::button variant="ghost">Ghost Button</x-slate::button>

Form Example

<x-slate::label for="email">Email</x-slate::label>
<x-slate::input type="email" id="email" name="email" placeholder="Enter your email" />

🎨 Components

Slate includes 57 components:

Core Components

Button, Input, Card, Label, Badge

Form Components

Textarea, Select, Checkbox, Radio Group, Switch, Slider, Input Group, Input OTP, Field

Feedback & Overlay

Alert, Dialog, Alert Dialog, Drawer, Sheet, Popover, Tooltip, Hover Card, Sonner (Toast)

Navigation

Dropdown Menu, Context Menu, Navigation Menu, Menubar, Breadcrumb, Tabs, Sidebar, Pagination

Data Display

Table, Avatar, Separator, Skeleton, Empty, Aspect Ratio

Advanced

Accordion, Collapsible, Command, Combobox, Calendar, Progress, Scroll Area, Resizable, Carousel, Chart

Utility

Toggle, Toggle Group, Button Group, Item, Kbd, Spinner

🎨 Theming

Color System

Slate uses semantic color naming with foreground/background pairs:

Base Colors:

background / foreground - Page background and text
border, input, ring - UI element colors

Semantic Colors:

primary / primary-foreground - Main brand color
secondary / secondary-foreground - Secondary actions
success / success-foreground - Success states
warning / warning-foreground - Warning states
info / info-foreground - Informational states
error / error-foreground - Error states
danger / danger-foreground - Destructive actions
muted / muted-foreground - Subtle backgrounds/text
accent / accent-foreground - Hover states, highlights
card / card-foreground - Card backgrounds
popover / popover-foreground - Popover backgrounds

Customize Colors

Override CSS variables in resources/css/slate.css:

:root {
  --color-primary: 142 76% 36%; /* Custom green */
  --color-primary-foreground: 355 100% 97%;
  --color-success: 142 71% 45%; /* Custom success color */
  --color-success-foreground: 0 0% 98%;
}

.dark {
  --color-primary: 142 70% 45%; /* Dark mode variant */
  --color-primary-foreground: 0 0% 9%;
}

Dark Mode

Dark mode is automatically handled via the .dark class:

<html class="dark">
  <!-- Dark mode enabled -->
</html>

Toggle dark mode with Alpine.js:

<div x-data="{ dark: false }">
  <button @click="dark = !dark; document.documentElement.classList.toggle('dark', dark)">
    Toggle Dark Mode
  </button>
</div>

🧪 Testing

Slate components are tested using:

Unit Tests - Blade component rendering with different props/variants
Integration Tests - Components in real Laravel views and forms
Visual Regression Tests
Accessibility Tests - WCAG 2.1 AA compliance using axe-core/Pa11y

📚 Documentation

Full documentation is available at: https://slate.electrik.dev

Note: Documentation is in a separate repository (slate-docs) and uses Jigsaw for static site generation.

🔧 Customization

Self-Contained Package

Slate is designed to be self-contained. All styles and components live in the package, and the slate:install command handles configuration automatically.

Customize CSS Variables

Edit resources/css/slate.css (copied during installation) to customize colors, spacing, and other design tokens.

Publish Views (Optional)

To customize component markup:

php artisan vendor:publish --tag=slate-views

Views will be published to resources/views/vendor/slate/components/

Note: Published views won't receive automatic updates. Use this only if you need to modify component structure.

🤝 Contributing

Contributions are welcome! Please see our Contributing Guide for details.

📄 License

This package is open-sourced software licensed under the MIT license.

🙏 Credits

Built with Laravel and Tailwind CSS
Interactive components powered by Alpine.js

Made with ❤️ by Electrik

electrik / slate

Maintainers

Details