PHPackages electrik/slate - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. electrik/slate ActiveLibrary[Templating & Views](/categories/templating) electrik/slate ============== 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 2.1.1(3mo ago)102.3kโ†‘263.6%[1 PRs](https://github.com/electrikhq/slate/pulls)1BladePHP ^8.1|^8.2|^8.3|^8.4CI passing Since Dec 22Pushed 3mo ago2 watchersCompare [ Source](https://github.com/electrikhq/slate)[ Packagist](https://packagist.org/packages/electrik/slate)[ GitHub Sponsors](https://github.com/electrikhq)[ RSS](/packages/electrik-slate/feed)WikiDiscussions 2.x Synced 1mo ago READMEChangelog (5)Dependencies (5)Versions (23)Used By (1) Slate UI Kit ============ [](#slate-ui-kit) [![Latest Version](https://camo.githubusercontent.com/aec748e36288f762b480fea1ed9c25ec0a012fdc36a309f72eec8624845810e2/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f656c65637472696b2f736c6174652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/electrik/slate)[![Total Downloads](https://camo.githubusercontent.com/0593bbd35824d0c1a07243a38e8ddc5a35a6cec7a40c025352fed16bcdcd99ee/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f656c65637472696b2f736c6174652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/electrik/slate)[![License](https://camo.githubusercontent.com/2900797f19668d2ef1b65b368fbf4894e398c399e960a77093831a8eb4c776f5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f656c65637472696b2f736c6174652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/electrik/slate)[![PHP Version](https://camo.githubusercontent.com/a4b1a61916c37c96fb0e4bf8f751d51e86f63aebd21b6943bf22e48461bfafdf/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f656c65637472696b2f736c6174652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/electrik/slate)[![Laravel Version](https://camo.githubusercontent.com/c45f9843cdb48719a12ab2b4554c03cfb19a6adcc9a70cbdd2707fa47b906da1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31302e7825323025374325323031312e7825323025374325323031322e782d4646324432303f7374796c653d666c61742d737175617265266c6f676f3d6c61726176656c266c6f676f436f6c6f723d7768697465)](https://laravel.com)[![Tests](https://camo.githubusercontent.com/c4c663a9760493c74c1a1e038d7cc95ef145910c203fea38554f78db748d36d1/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f656c65637472696b68712f736c6174652f2e6769746875622f776f726b666c6f77732f74657374732e796d6c3f6272616e63683d322e78266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/electrikhq/slate/actions)[![Code Coverage](https://camo.githubusercontent.com/f353a169e6ae53367d5448941a26818f42e3ea39fcb3207a9cee87ec69ac5eaa/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f7665726167652d636f6d696e67253230736f6f6e2d6c69676874677265793f7374796c653d666c61742d737175617265)](https://github.com/electrikhq/slate)[![Code Quality](https://camo.githubusercontent.com/e0aa67c5bfef4c5af26063735beb25509c22cd2f683bc04a4ef6c1d64ee9a037/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f64652532307175616c6974792d636f6d696e67253230736f6f6e2d6c69676874677265793f7374796c653d666c61742d737175617265)](https://github.com/electrikhq/slate)[![WCAG 2.1 AA](https://camo.githubusercontent.com/8b3e4320291d1ba0ba1e634354fb9b4666cb503c803d4929f4b332d28232d0df/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f574341472d322e3125323041412d3443414635303f7374796c653d666c61742d737175617265266c6f676f3d6163636573736962696c697479266c6f676f436f6c6f723d7768697465)](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa)[![ARIA Support](https://camo.githubusercontent.com/e32ca7596ecf151daf94a58a6980ed2a78a747a496ab0630e3816db9eede07e1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f415249412d737570706f727465642d3443414635303f7374796c653d666c61742d737175617265266c6f676f3d6163636573736962696c697479266c6f676f436f6c6f723d7768697465)](https://www.w3.org/WAI/ARIA/)[![GitHub Stars](https://camo.githubusercontent.com/d374ca21e2eddb9e4444c4eb0b5e5c76b46e91875ef9bd3202a525735244170a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f656c65637472696b68712f736c6174652e7376673f7374796c653d666c61742d737175617265266c6162656c3d7374617273)](https://github.com/electrikhq/slate)[![GitHub Forks](https://camo.githubusercontent.com/134dc775e92db71fef471c6b7426420205fd482cba1871a04a44c67b761c226a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f656c65637472696b68712f736c6174652e7376673f7374796c653d666c61742d737175617265266c6162656c3d666f726b73)](https://github.com/electrikhq/slate)[![GitHub Issues](https://camo.githubusercontent.com/b2a267a951418ca220fb3a2a9587698d3161f0d832989f4be136444ea15f5fa2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f656c65637472696b68712f736c6174652e7376673f7374796c653d666c61742d737175617265266c6162656c3d697373756573)](https://github.com/electrikhq/slate/issues)[![GitHub PRs](https://camo.githubusercontent.com/dcd9adca13103ea78741da389ec11ab6c21cf7f64838cc17812d0dabad9877b2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732d70722f656c65637472696b68712f736c6174652e7376673f7374796c653d666c61742d737175617265266c6162656c3d505273)](https://github.com/electrikhq/slate/pulls)[![Last Commit](https://camo.githubusercontent.com/cd47f628c66447702acf928d676a3ca9f9f731a12f8461abc223f6a272367798/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6173742d636f6d6d69742f656c65637472696b68712f736c6174652f322e782e7376673f7374796c653d666c61742d737175617265266c6162656c3d6c617374253230636f6d6d6974)](https://github.com/electrikhq/slate)[![Maintained](https://camo.githubusercontent.com/262da8355ce890b51356c7e3ac79e14eace9ab1fc9ddeda149cc657c20b129f6/68747470733a2f2f696d672e736869656c64732e696f2f6d61696e74656e616e63652f7965732f323032362e7376673f7374796c653d666c61742d737175617265266c6162656c3d6d61696e7461696e6564)](https://github.com/electrikhq/slate) **Slate** - a Laravel Blade UI Kit is a set of anonymous blade components built using [TailwindCSS](https://tailwindcss.com/) v4 with built-in dark mode support for your next [Laravel](https://laravel.com) project. Perfect for Laravel UI development with beautiful, accessible components. [![Slate UI Auth Login Screen Screenshot](https://camo.githubusercontent.com/2cff74fc82665e90639c24aa68581e4aa95a76628d4a76369d29a057e786a3be/68747470733a2f2f692e706f7374696d672e63632f6e56323744426a322f456c65637472696b2d536c6174652d4c61726176656c2d426c6164652d55492d4b69742d44656d6f2d456c65637472696b2d4c61726176656c2d5361612d532d537461727465722d4b69742d4c6f67696e2d53637265656e2e706e67)](https://camo.githubusercontent.com/2cff74fc82665e90639c24aa68581e4aa95a76628d4a76369d29a057e786a3be/68747470733a2f2f692e706f7374696d672e63632f6e56323744426a322f456c65637472696b2d536c6174652d4c61726176656c2d426c6164652d55492d4b69742d44656d6f2d456c65637472696b2d4c61726176656c2d5361612d532d537461727465722d4b69742d4c6f67696e2d53637265656e2e706e67) [Demo](https://electrik.dev/demo/slate/forms) | [Documentation](https://electrik.dev/docs/slate/master) โœจ Features ---------- [](#-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 -------------- [](#-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 -------------- [](#-installation) ### Step 1: Install via Composer [](#step-1-install-via-composer) ``` composer require electrik/slate ``` ### Step 2: Run Installation Command [](#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 [](#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 ------- [](#-usage) ### Basic Example [](#basic-example) ``` Click me ``` ### With Variants [](#with-variants) ``` Save Warning Error Delete Cancel Ghost Button ``` ### Form Example [](#form-example) ``` Email ``` ๐ŸŽจ Components ------------ [](#-components) Slate includes **57 components**: ### Core Components [](#core-components) - Button, Input, Card, Label, Badge ### Form Components [](#form-components) - Textarea, Select, Checkbox, Radio Group, Switch, Slider, Input Group, Input OTP, Field ### Feedback & Overlay [](#feedback--overlay) - Alert, Dialog, Alert Dialog, Drawer, Sheet, Popover, Tooltip, Hover Card, Sonner (Toast) ### Navigation [](#navigation) - Dropdown Menu, Context Menu, Navigation Menu, Menubar, Breadcrumb, Tabs, Sidebar, Pagination ### Data Display [](#data-display) - Table, Avatar, Separator, Skeleton, Empty, Aspect Ratio ### Advanced [](#advanced) - Accordion, Collapsible, Command, Combobox, Calendar, Progress, Scroll Area, Resizable, Carousel, Chart ### Utility [](#utility) - Toggle, Toggle Group, Button Group, Item, Kbd, Spinner ๐ŸŽจ Theming --------- [](#-theming) ### Color System [](#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 [](#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) Dark mode is automatically handled via the `.dark` class: ``` ``` Toggle dark mode with Alpine.js: ``` Toggle Dark Mode ``` ๐Ÿงช Testing --------- [](#-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 --------------- [](#-documentation) Full documentation is available at: **Note:** Documentation is in a separate repository (`slate-docs`) and uses Jigsaw for static site generation. ๐Ÿ”ง Customization --------------- [](#-customization) ### Self-Contained Package [](#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 [](#customize-css-variables) Edit `resources/css/slate.css` (copied during installation) to customize colors, spacing, and other design tokens. ### Publish Views (Optional) [](#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 -------------- [](#-contributing) Contributions are welcome! Please see our [Contributing Guide](CONTRIBUTING.md) for details. ๐Ÿ“„ License --------- [](#-license) This package is open-sourced software licensed under the [MIT license](LICENSE). ๐Ÿ™ Credits --------- [](#-credits) - Built with [Laravel](https://laravel.com) and [Tailwind CSS](https://tailwindcss.com) - Interactive components powered by [Alpine.js](https://alpinejs.dev/) --- Made with โค๏ธ by [Electrik](https://electrik.dev) ### Health Score 53 โ€” FairBetter than 96% of packages Maintenance85 Actively maintained with recent releases Popularity25 Limited adoption so far Community12 Small or concentrated contributor base Maturity76 Established project with proven stability Bus Factor1 Top contributor holds 99.4% of commits โ€” single point of failure How is this calculated?**Maintenance (25%)** โ€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** โ€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** โ€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** โ€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~74 days Recently: every ~4 days Total 21 Last Release 109d ago Major Versions 0.1.0 โ†’ 1.0.02024-08-26 1.x-dev โ†’ 2.0.0-b02025-12-27 PHP version history (5 changes)0.0.1PHP ^7.4|^8.0 0.1.0PHP ^7.4|^8.0|^8.1 1.0.0PHP ^7.4|^8.0|^8.1|^8.2|^8.3 1.2.0PHP ^7.4|^8.0|^8.1|^8.2|^8.3|^8.4 2.0.0-b0PHP ^8.1|^8.2|^8.3|^8.4 ### Community Maintainers ![](https://www.gravatar.com/avatar/f02ffb8f3bc26ae1f6b24160279025c4eff4c59c360c71610624dccabf636a86?d=identicon)[neerajsohal](/maintainers/neerajsohal) --- Top Contributors [![neerajsohal](https://avatars.githubusercontent.com/u/88097?v=4)](https://github.com/neerajsohal "neerajsohal (155 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (1 commits)") --- Tags bladeblade-componentslaraveltailwind-uitailwindcssui-kitlaraveluicomponentsbladetailwindtailwindcssdesign-systemdark-modelaravel uiui-kit ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/electrik-slate/health.svg) ``` [![Health](https://phpackages.com/badges/electrik-slate/health.svg)](https://phpackages.com/packages/electrik-slate) ``` ### Alternatives [robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[area17/blast Storybook for Laravel Blade 308664.1k](/packages/area17-blast)[ddfsn/blade-components Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps. 193.1k](/packages/ddfsn-blade-components) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)