{"id":16506338,"url":"https://github.com/electrikhq/slate","last_synced_at":"2026-01-20T08:02:52.712Z","repository":{"id":63240767,"uuid":"563700724","full_name":"electrikhq/slate","owner":"electrikhq","description":"Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS 3.x with built-in dark mode support for your next Laravel project.","archived":false,"fork":false,"pushed_at":"2026-01-02T15:13:00.000Z","size":360,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"2.x","last_synced_at":"2026-01-08T22:31:20.584Z","etag":null,"topics":["blade","blade-components","laravel","tailwind-ui","tailwindcss","ui-kit"],"latest_commit_sha":null,"homepage":"https://electrik.dev/docs/slate/master","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/electrikhq.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["electrikhq"]}},"created_at":"2022-11-09T06:29:00.000Z","updated_at":"2026-01-02T15:12:30.000Z","dependencies_parsed_at":"2024-09-09T06:29:20.769Z","dependency_job_id":"0ec30edf-18b1-452c-9af1-f397d223abb6","html_url":"https://github.com/electrikhq/slate","commit_stats":{"total_commits":57,"total_committers":2,"mean_commits":28.5,"dds":"0.052631578947368474","last_synced_commit":"6f8568724bc03e73ad0bed708adab2ad8d26ccf7"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/electrikhq/slate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electrikhq%2Fslate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electrikhq%2Fslate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electrikhq%2Fslate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electrikhq%2Fslate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/electrikhq","download_url":"https://codeload.github.com/electrikhq/slate/tar.gz/refs/heads/2.x","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electrikhq%2Fslate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28598874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T02:08:49.799Z","status":"ssl_error","status_checked_at":"2026-01-20T02:08:44.148Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blade","blade-components","laravel","tailwind-ui","tailwindcss","ui-kit"],"created_at":"2024-10-11T15:19:05.871Z","updated_at":"2026-01-20T08:02:52.707Z","avatar_url":"https://github.com/electrikhq.png","language":"PHP","funding_links":["https://github.com/sponsors/electrikhq"],"categories":[],"sub_categories":[],"readme":"# Slate UI Kit\n\n[![Latest Version](https://img.shields.io/packagist/v/electrik/slate.svg?style=flat-square)](https://packagist.org/packages/electrik/slate)\n[![Total Downloads](https://img.shields.io/packagist/dt/electrik/slate.svg?style=flat-square)](https://packagist.org/packages/electrik/slate)\n[![License](https://img.shields.io/packagist/l/electrik/slate.svg?style=flat-square)](https://packagist.org/packages/electrik/slate)\n[![PHP Version](https://img.shields.io/packagist/php-v/electrik/slate.svg?style=flat-square)](https://packagist.org/packages/electrik/slate)\n[![Laravel Version](https://img.shields.io/badge/Laravel-10.x%20%7C%2011.x%20%7C%2012.x-FF2D20?style=flat-square\u0026logo=laravel\u0026logoColor=white)](https://laravel.com)\n[![Tests](https://img.shields.io/github/actions/workflow/status/electrikhq/slate/.github/workflows/tests.yml?branch=2.x\u0026label=tests\u0026style=flat-square)](https://github.com/electrikhq/slate/actions)\n[![Code Coverage](https://img.shields.io/badge/coverage-coming%20soon-lightgrey?style=flat-square)](https://github.com/electrikhq/slate)\n[![Code Quality](https://img.shields.io/badge/code%20quality-coming%20soon-lightgrey?style=flat-square)](https://github.com/electrikhq/slate)\n[![WCAG 2.1 AA](https://img.shields.io/badge/WCAG-2.1%20AA-4CAF50?style=flat-square\u0026logo=accessibility\u0026logoColor=white)](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize\u0026levels=aaa)\n[![ARIA Support](https://img.shields.io/badge/ARIA-supported-4CAF50?style=flat-square\u0026logo=accessibility\u0026logoColor=white)](https://www.w3.org/WAI/ARIA/)\n[![GitHub Stars](https://img.shields.io/github/stars/electrikhq/slate.svg?style=flat-square\u0026label=stars)](https://github.com/electrikhq/slate)\n[![GitHub Forks](https://img.shields.io/github/forks/electrikhq/slate.svg?style=flat-square\u0026label=forks)](https://github.com/electrikhq/slate)\n[![GitHub Issues](https://img.shields.io/github/issues/electrikhq/slate.svg?style=flat-square\u0026label=issues)](https://github.com/electrikhq/slate/issues)\n[![GitHub PRs](https://img.shields.io/github/issues-pr/electrikhq/slate.svg?style=flat-square\u0026label=PRs)](https://github.com/electrikhq/slate/pulls)\n[![Last Commit](https://img.shields.io/github/last-commit/electrikhq/slate/2.x.svg?style=flat-square\u0026label=last%20commit)](https://github.com/electrikhq/slate)\n[![Maintained](https://img.shields.io/maintenance/yes/2026.svg?style=flat-square\u0026label=maintained)](https://github.com/electrikhq/slate)\n\n**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.\n\n![Slate UI Auth Login Screen Screenshot](https://i.postimg.cc/nV27DBj2/Electrik-Slate-Laravel-Blade-UI-Kit-Demo-Electrik-Laravel-Saa-S-Starter-Kit-Login-Screen.png)\n\n[Demo](https://electrik.dev/demo/slate/forms) | [Documentation](https://electrik.dev/docs/slate/master)\n\n## ✨ Features\n\n- 🎨 **57 Components** - Complete component library\n- 🎯 **Zero PHP Color Logic** - All colors controlled via CSS variables\n- 🌙 **Dark Mode** - Built-in dark mode support with automatic variable switching\n- ♿ **Accessible** - WCAG 2.1 AA compliant with proper ARIA attributes\n- 🚀 **Tailwind CSS v4** - Using latest Tailwind with CSS variables\n- 📦 **Anonymous Components** - Pure Blade templates, no PHP classes\n- 🎨 **Self-Contained** - Everything in the package, minimal client configuration\n- ⚡ **Alpine.js** - Interactive components using Alpine.js (standard in Laravel)\n- 🎨 **Semantic Colors** - success, warning, info, error, danger color system\n\n## 📋 Requirements\n\n- PHP 8.1+\n- Laravel 10.0+ or 11.0+ or 12.0+\n- Tailwind CSS v4\n- Alpine.js (for interactive components - usually included in Laravel apps)\n\n## 🚀 Installation\n\n### Step 1: Install via Composer\n\n```bash\ncomposer require electrik/slate\n```\n\n### Step 2: Run Installation Command\n\n```bash\nphp artisan slate:install\n```\n\nThis command will:\n- Copy `slate.css` to `resources/css/slate.css`\n- Add `@import './slate.css';` to your `app.css` (after `@import 'tailwindcss';`)\n- Add `@source` directive to scan Slate components\n\n**Note:** The installation command automatically configures your `app.css` file. No manual Tailwind config changes needed when using Tailwind CSS v4!\n\n### Step 3: Build Assets\n\n```bash\nnpm run build\n```\n\nThat's it! Slate uses CSS variables and Tailwind v4's `@theme` system, so no `tailwind.config.js` changes are required.\n\n## 📖 Usage\n\n### Basic Example\n\n```blade\n\u003cx-slate::button\u003eClick me\u003c/x-slate::button\u003e\n```\n\n### With Variants\n\n```blade\n\u003cx-slate::button variant=\"success\"\u003eSave\u003c/x-slate::button\u003e\n\u003cx-slate::button variant=\"warning\"\u003eWarning\u003c/x-slate::button\u003e\n\u003cx-slate::button variant=\"error\"\u003eError\u003c/x-slate::button\u003e\n\u003cx-slate::button variant=\"danger\"\u003eDelete\u003c/x-slate::button\u003e\n\u003cx-slate::button variant=\"outline\"\u003eCancel\u003c/x-slate::button\u003e\n\u003cx-slate::button variant=\"ghost\"\u003eGhost Button\u003c/x-slate::button\u003e\n```\n\n### Form Example\n\n```blade\n\u003cx-slate::label for=\"email\"\u003eEmail\u003c/x-slate::label\u003e\n\u003cx-slate::input type=\"email\" id=\"email\" name=\"email\" placeholder=\"Enter your email\" /\u003e\n```\n\n## 🎨 Components\n\nSlate includes **57 components**:\n\n### Core Components\n- Button, Input, Card, Label, Badge\n\n### Form Components\n- Textarea, Select, Checkbox, Radio Group, Switch, Slider, Input Group, Input OTP, Field\n\n### Feedback \u0026 Overlay\n- Alert, Dialog, Alert Dialog, Drawer, Sheet, Popover, Tooltip, Hover Card, Sonner (Toast)\n\n### Navigation\n- Dropdown Menu, Context Menu, Navigation Menu, Menubar, Breadcrumb, Tabs, Sidebar, Pagination\n\n### Data Display\n- Table, Avatar, Separator, Skeleton, Empty, Aspect Ratio\n\n### Advanced\n- Accordion, Collapsible, Command, Combobox, Calendar, Progress, Scroll Area, Resizable, Carousel, Chart\n\n### Utility\n- Toggle, Toggle Group, Button Group, Item, Kbd, Spinner\n\n## 🎨 Theming\n\n### Color System\n\nSlate uses semantic color naming with foreground/background pairs:\n\n**Base Colors:**\n- `background` / `foreground` - Page background and text\n- `border`, `input`, `ring` - UI element colors\n\n**Semantic Colors:**\n- `primary` / `primary-foreground` - Main brand color\n- `secondary` / `secondary-foreground` - Secondary actions\n- `success` / `success-foreground` - Success states\n- `warning` / `warning-foreground` - Warning states\n- `info` / `info-foreground` - Informational states\n- `error` / `error-foreground` - Error states\n- `danger` / `danger-foreground` - Destructive actions\n- `muted` / `muted-foreground` - Subtle backgrounds/text\n- `accent` / `accent-foreground` - Hover states, highlights\n- `card` / `card-foreground` - Card backgrounds\n- `popover` / `popover-foreground` - Popover backgrounds\n\n### Customize Colors\n\nOverride CSS variables in `resources/css/slate.css`:\n\n```css\n:root {\n  --color-primary: 142 76% 36%; /* Custom green */\n  --color-primary-foreground: 355 100% 97%;\n  --color-success: 142 71% 45%; /* Custom success color */\n  --color-success-foreground: 0 0% 98%;\n}\n\n.dark {\n  --color-primary: 142 70% 45%; /* Dark mode variant */\n  --color-primary-foreground: 0 0% 9%;\n}\n```\n\n### Dark Mode\n\nDark mode is automatically handled via the `.dark` class:\n\n```blade\n\u003chtml class=\"dark\"\u003e\n  \u003c!-- Dark mode enabled --\u003e\n\u003c/html\u003e\n```\n\nToggle dark mode with Alpine.js:\n\n```blade\n\u003cdiv x-data=\"{ dark: false }\"\u003e\n  \u003cbutton @click=\"dark = !dark; document.documentElement.classList.toggle('dark', dark)\"\u003e\n    Toggle Dark Mode\n  \u003c/button\u003e\n\u003c/div\u003e\n```\n\n## 🧪 Testing\n\nSlate components are tested using:\n\n- **Unit Tests** - Blade component rendering with different props/variants\n- **Integration Tests** - Components in real Laravel views and forms\n- **Visual Regression Tests**\n- **Accessibility Tests** - WCAG 2.1 AA compliance using axe-core/Pa11y\n\n## 📚 Documentation\n\nFull documentation is available at: [https://slate.electrik.dev](https://slate.electrik.dev)\n\n**Note:** Documentation is in a separate repository (`slate-docs`) and uses Jigsaw for static site generation.\n\n## 🔧 Customization\n\n### Self-Contained Package\n\nSlate is designed to be self-contained. All styles and components live in the package, and the `slate:install` command handles configuration automatically.\n\n### Customize CSS Variables\n\nEdit `resources/css/slate.css` (copied during installation) to customize colors, spacing, and other design tokens.\n\n### Publish Views (Optional)\n\nTo customize component markup:\n\n```bash\nphp artisan vendor:publish --tag=slate-views\n```\n\nViews will be published to `resources/views/vendor/slate/components/`\n\n**Note:** Published views won't receive automatic updates. Use this only if you need to modify component structure.\n\n## 🤝 Contributing\n\nContributions are welcome! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## 📄 License\n\nThis package is open-sourced software licensed under the [MIT license](LICENSE).\n\n## 🙏 Credits\n\n- Built with [Laravel](https://laravel.com) and [Tailwind CSS](https://tailwindcss.com)\n- Interactive components powered by [Alpine.js](https://alpinejs.dev/)\n\n---\n\nMade with ❤️ by [Electrik](https://electrik.dev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectrikhq%2Fslate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felectrikhq%2Fslate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectrikhq%2Fslate/lists"}