Download the PHP package electrik/slate without Composer
On this page you can find all versions of the php package electrik/slate. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download electrik/slate
More information about electrik/slate
Files in electrik/slate
Package slate
Short Description Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project
License
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package slate
Slate UI Kit
Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project. Perfect for Laravel UI development with beautiful, accessible components.
✨ 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
Step 2: Run Installation Command
This command will:
- Copy
slate.csstoresources/css/slate.css - Add
@import './slate.css';to yourapp.css(after@import 'tailwindcss';) - Add
@sourcedirective 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
That's it! Slate uses CSS variables and Tailwind v4's @theme system, so no tailwind.config.js changes are required.
📖 Usage
Basic Example
With Variants
Form Example
🎨 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 textborder,input,ring- UI element colors
Semantic Colors:
primary/primary-foreground- Main brand colorsecondary/secondary-foreground- Secondary actionssuccess/success-foreground- Success stateswarning/warning-foreground- Warning statesinfo/info-foreground- Informational stateserror/error-foreground- Error statesdanger/danger-foreground- Destructive actionsmuted/muted-foreground- Subtle backgrounds/textaccent/accent-foreground- Hover states, highlightscard/card-foreground- Card backgroundspopover/popover-foreground- Popover backgrounds
Customize Colors
Override CSS variables in resources/css/slate.css:
Dark Mode
Dark mode is automatically handled via the .dark class:
Toggle dark mode with Alpine.js:
🧪 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:
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
All versions of slate with dependencies
illuminate/support Version ^10.0|^11.0|^12.0
blade-ui-kit/blade-icons Version ^1.8
codeat3/blade-carbon-icons Version *