electrik/slate
Slate is a shadcn-inspired Blade UI kit for Laravel. Build product interfaces with anonymous x-slate::* components, Tailwind CSS v4, Slate-owned design tokens, first-class dark mode, and Livewire-aware forms—all in Blade, no React or copy-paste CLI required.
scripts/setup-consumer-sandbox.sh, critical smoke page + PHPUnit, GitHub Actions)prefers-reduced-motion short-circuit for overlay motion classes[@electrik](https://github.com/electrik)/slate-mcp publishConfig.access=public and version string sync for npm publishx-teleport from a hidden x-data host so top-level pages initialize reliablyllms.txt / llms-full.txt on the docs site, read-only [@electrik](https://github.com/electrik)/slate-mcp server (mcp/), AGENTS.md, Cursor rule, and skillbutton, input, textarea, select, checkbox, switch, radiobadge componentcard, card-header, card-title, card-description, card-action, card-content, card-footeralert, alert-title, alert-description, alert-action (progressive title / description / action slot; default, destructive, success, warning, info)separator with orientation and decorative propsavatar, avatar-image, avatar-fallback, avatar-badge, avatar-group, avatar-group-count (progressive src / alt / fallback / dot)skeleton loading placeholderdialog, dialog-trigger, dialog-content, dialog-header, dialog-footer, dialog-title, dialog-description, dialog-closetabs, tabs-list, tabs-trigger, tabs-content (default / line list variants; horizontal / vertical)spinner loading indicatorbreadcrumb, breadcrumb-list, breadcrumb-item, breadcrumb-link, breadcrumb-page, breadcrumb-separator, breadcrumb-ellipsisprogress with value / max (RTL-friendly width fill)kbd and kbd-group for keyboard shortcutsaspect-ratio with CSS ratio presetstooltip, tooltip-trigger, tooltip-content (progressive label; logical side)collapsible, collapsible-trigger, collapsible-contentaccordion, accordion-item, accordion-trigger, accordion-content (single / multiple)popover, popover-trigger, popover-content (progressive content slot; logical side / align)toggle two-state button (default / outline)empty, empty-header, empty-media, empty-title, empty-description, empty-content (progressive title / description / media / actions)toggle-group, toggle-group-item (single / multiple)slider range input with styled track and thumb (Alpine)pagination, pagination-content, pagination-item, pagination-link, pagination-previous, pagination-next, pagination-ellipsistable, table-header, table-body, table-footer, table-row, table-head, table-cell, table-captionhover-card, hover-card-trigger, hover-card-content.light theme islands so docs previews can force light mode inside a dark page (and the reverse) without leaking global dark: utilitiesalert-dialog, alert-dialog-trigger, alert-dialog-content, alert-dialog-header, alert-dialog-footer, alert-dialog-title, alert-dialog-description, alert-dialog-action, alert-dialog-cancelsheet, sheet-trigger, sheet-content, sheet-header, sheet-footer, sheet-title, sheet-description, sheet-close (logical side)scroll-area thin scrollbar viewportbutton-group connected button clusters (horizontal / vertical)dropdown-menu, dropdown-menu-trigger, dropdown-menu-content, dropdown-menu-item, dropdown-menu-label, dropdown-menu-separator, dropdown-menu-shortcutfield, field-label, field-description, field-errorlabel / description / errorMessage on checkbox, radio, switch, input, textarea, and select (compose the field helpers automatically, like dark-mode-toggle builds on button)button loading prop for forced/Alpine busy state (alongside Livewire wire:loading + loadingText)dark-mode-toggle componentradio-group, radio-group-item (progressive label / description / errorMessage)file-input with progressive field compositionform, form-itemrating star control (Alpine)timeline, timeline-item, timeline-indicator, timeline-content, timeline-title, timeline-descriptionstepper, stepper-item, stepper-title, stepper-descriptionmarquee CSS infinite scroll with pause-on-hover and reversedrawer, drawer-trigger, drawer-content, drawer-header, drawer-footer, drawer-title, drawer-description, drawer-close (default side=bottom)carousel, carousel-content, carousel-item, carousel-previous, carousel-nextresizable-panel-group, resizable-panel, resizable-handlecontext-menu, context-menu-trigger, context-menu-content, context-menu-item, context-menu-separator, context-menu-labelcommand, command-input, command-list, command-empty, command-group, command-item, command-separatorcombobox, combobox-input, combobox-content, combobox-itemcalendar month grid date picker (Alpine)menubar, menubar-menu, menubar-trigger, menubar-content, menubar-item, menubar-separatornavigation-menu, navigation-menu-list, navigation-menu-item, navigation-menu-trigger, navigation-menu-content, navigation-menu-linksidebar-provider, sidebar, sidebar-header, sidebar-content, sidebar-footer, sidebar-menu, sidebar-menu-item, sidebar-menu-button, sidebar-inset, sidebar-triggerapp-shell layout with header, sidebar, and main slotschart, chart-bar (minimal CSS bar chart)spotlight mouse-following radial gradient (Alpine)toaster, toast, toast-title, toast-description, toast-action, toast-close (slate-toast window event; toaster teleports to body)localStorage (slate-theme) and restored on loadsidebar, sidebar-foreground, sidebar-accent, sidebar-border, sidebar-ring)dialog, drawer, sheet, and alert-dialogsuccess, warning, and info3.x rebuild foundationbutton primitiveHow can I help you explore Laravel packages today?