# Electrik Slate

> Slate is a shadcn-inspired Laravel Blade UI kit: anonymous components, Tailwind CSS v4, Slate-owned OKLCH tokens, Alpine where needed, and Livewire-aware forms. Package: `electrik/slate` (3.x). Docs: https://slate.electrik.dev

## Get started

- [Introduction](https://slate.electrik.dev/docs/getting-started/introduction): What Slate is and who it is for.
- [Installation](https://slate.electrik.dev/docs/getting-started/installation): Composer require + CSS import.
- [Philosophy](https://slate.electrik.dev/docs/philosophy): Progressive props, anonymous Blade, no fake CLI.
- [Design tokens](https://slate.electrik.dev/docs/design-tokens): `--slate-*` OKLCH variables and Tailwind mappings.
- [API freeze](https://slate.electrik.dev/docs/api-freeze): Frozen progressive props, toast event, token names.
- [Form matrix](https://slate.electrik.dev/docs/form-matrix): Controls × label / description / errorMessage × Livewire.
- [Livewire](https://slate.electrik.dev/docs/livewire): Validation, loading, and toast patterns.
- [AI & MCP](https://slate.electrik.dev/docs/ai): llms.txt, MCP server, Cursor rules.
- [Changelog](https://slate.electrik.dev/changelog): Release notes.

## Galleries

- [Components](https://slate.electrik.dev/components): All shipped component docs with live previews.
- [Blocks](https://slate.electrik.dev/blocks): Copy-ready Blade sections.
- [Themes](https://slate.electrik.dev/themes): Token playground and accent presets.
- [Examples](https://slate.electrik.dev/examples): Full-page auth, dashboard, and landing.

## Components

- [Button](https://slate.electrik.dev/components/button.md): Displays a button or a component that looks like a button.
- [Badge](https://slate.electrik.dev/components/badge.md): A small flat label for status, counts, and categories.
- [Card](https://slate.electrik.dev/components/card.md): A flexible container with header, content, and footer sections.
- [Alert](https://slate.electrik.dev/components/alert.md): Displays a callout for user attention.
- [Separator](https://slate.electrik.dev/components/separator.md): Visually or semantically separates content.
- [Avatar](https://slate.electrik.dev/components/avatar.md): An image element with a fallback for representing a user.
- [Skeleton](https://slate.electrik.dev/components/skeleton.md): Use to show a placeholder while content is loading.
- [Dialog](https://slate.electrik.dev/components/dialog.md): A modal dialog that interrupts the user with important content.
- [Tabs](https://slate.electrik.dev/components/tabs.md): A set of layered sections of content displayed one at a time.
- [Spinner](https://slate.electrik.dev/components/spinner.md): A spinning indicator for loading states.
- [Breadcrumb](https://slate.electrik.dev/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Progress](https://slate.electrik.dev/components/progress.md): Displays an indicator showing the completion progress of a task.
- [Kbd](https://slate.electrik.dev/components/kbd.md): Displays a keyboard key or shortcut.
- [Aspect Ratio](https://slate.electrik.dev/components/aspect-ratio.md): Displays content within a desired ratio.
- [Tooltip](https://slate.electrik.dev/components/tooltip.md): A popup that displays information related to an element when hovered or focused.
- [Collapsible](https://slate.electrik.dev/components/collapsible.md): An interactive component which expands/collapses a panel.
- [Accordion](https://slate.electrik.dev/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Popover](https://slate.electrik.dev/components/popover.md): Displays rich content in a portal-like panel anchored to a trigger.
- [Toggle](https://slate.electrik.dev/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://slate.electrik.dev/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Empty](https://slate.electrik.dev/components/empty.md): Use to display an empty state when there is no content.
- [Slider](https://slate.electrik.dev/components/slider.md): An input where the user selects a value from within a given range.
- [Pagination](https://slate.electrik.dev/components/pagination.md): Pagination with page navigation, next and previous links.
- [Table](https://slate.electrik.dev/components/table.md): A responsive table component.
- [Hover Card](https://slate.electrik.dev/components/hover-card.md): For sighted users to preview content available behind a link.
- [Alert Dialog](https://slate.electrik.dev/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Sheet](https://slate.electrik.dev/components/sheet.md): Extends the dialog component to display content that complements the main content of the screen.
- [Scroll Area](https://slate.electrik.dev/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Button Group](https://slate.electrik.dev/components/button-group.md): A container that groups related buttons together.
- [Dropdown Menu](https://slate.electrik.dev/components/dropdown-menu.md): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
- [Input](https://slate.electrik.dev/components/input.md): Displays a form input field or a component that looks like an input field.
- [Textarea](https://slate.electrik.dev/components/textarea.md): A multiline text input with the same density and validation semantics as input.
- [Select](https://slate.electrik.dev/components/select.md): A native select control with semantic styling and placeholder support.
- [Checkbox](https://slate.electrik.dev/components/checkbox.md): A native checkbox with custom styling and validation-aware states.
- [Switch](https://slate.electrik.dev/components/switch.md): A native checkbox rendered as an accessible switch.
- [Radio](https://slate.electrik.dev/components/radio.md): A native radio input with custom styling.
- [Field](https://slate.electrik.dev/components/field.md): Composition helpers for labels, descriptions, and validation messages.
- [Dark mode toggle](https://slate.electrik.dev/components/dark-mode-toggle.md): Toggle light and dark themes by switching the .dark class on html.
- [Radio Group](https://slate.electrik.dev/components/radio-group.md): A fieldset-like group for selecting a single option from related radio buttons.
- [File Input](https://slate.electrik.dev/components/file-input.md): A styled file upload control with progressive label, description, and error support.
- [Form](https://slate.electrik.dev/components/form.md): A simple form wrapper with consistent vertical spacing.
- [Rating](https://slate.electrik.dev/components/rating.md): An interactive star rating control powered by Alpine.js.
- [Timeline](https://slate.electrik.dev/components/timeline.md): Display a chronological sequence of events with indicators and content.
- [Stepper](https://slate.electrik.dev/components/stepper.md): A multi-step progress indicator with active, complete, and inactive states.
- [Marquee](https://slate.electrik.dev/components/marquee.md): An infinitely scrolling content strip with CSS animation.
- [Drawer](https://slate.electrik.dev/components/drawer.md): A panel that slides in from an edge, defaulting to the bottom of the screen.
- [Carousel](https://slate.electrik.dev/components/carousel.md): A slideshow for cycling through content with previous and next controls.
- [Resizable](https://slate.electrik.dev/components/resizable.md): Adjustable panel layouts with draggable handles.
- [Context Menu](https://slate.electrik.dev/components/context-menu.md): A menu triggered by right-click, positioned at the cursor.
- [Command](https://slate.electrik.dev/components/command.md): A searchable command palette list for quick actions and navigation.
- [Combobox](https://slate.electrik.dev/components/combobox.md): An autocomplete input with a filterable listbox of options.
- [Calendar](https://slate.electrik.dev/components/calendar.md): A simple month grid date picker with previous and next navigation.
- [Menubar](https://slate.electrik.dev/components/menubar.md): A horizontal menu bar with dropdown submenus, one open at a time.
- [Navigation Menu](https://slate.electrik.dev/components/navigation-menu.md): A site navigation component with hover and click dropdown panels.
- [Sidebar](https://slate.electrik.dev/components/sidebar.md): A collapsible application sidebar with menu items and inset content area.
- [App Shell](https://slate.electrik.dev/components/app-shell.md): A simple application layout with optional header, sidebar, and main content slots.
- [Chart](https://slate.electrik.dev/components/chart.md): A minimal CSS bar chart from JSON data or composed bar slots.
- [Spotlight](https://slate.electrik.dev/components/spotlight.md): A decorative radial gradient that follows the mouse cursor.
- [Toast](https://slate.electrik.dev/components/toast.md): Temporary notifications that slide in from a screen edge.

## Blocks

- [Login](https://slate.electrik.dev/blocks/login): Email and password sign-in card on a muted canvas. (Auth)
- [Register](https://slate.electrik.dev/blocks/register): Create-account form with terms checkbox. (Auth)
- [Settings](https://slate.electrik.dev/blocks/settings): Profile fields, notification switches, and a danger zone. (Application)
- [App shell](https://slate.electrik.dev/blocks/app-shell): Header, collapsible sidebar, and main workspace. (Application)
- [Empty state](https://slate.electrik.dev/blocks/empty-state): Centered empty composition with media, copy, and actions. (Application)
- [Pricing](https://slate.electrik.dev/blocks/pricing): Three-tier pricing strip with badges and CTAs. (Marketing)
- [Form validation](https://slate.electrik.dev/blocks/form-validation): Progressive field errors for static and Livewire-style demos. (Forms)
- [Toast action](https://slate.electrik.dev/blocks/toast-action): Card that dispatches slate-toast events from a button. (Feedback)
- [Hero](https://slate.electrik.dev/blocks/hero): Centered marketing hero with dual CTAs. (Marketing)

## Examples

- [Login](https://slate.electrik.dev/examples/login): Full-page sign-in for an auth flow.
- [Register](https://slate.electrik.dev/examples/register): Full-page account creation.
- [Dashboard](https://slate.electrik.dev/examples/dashboard): Simple metrics grid and quick actions.
- [Landing](https://slate.electrik.dev/examples/landing): Marketing landing with hero and feature strip.

## Machine-readable

- [llms.txt](https://slate.electrik.dev/llms.txt): This index.
- [llms-full.txt](https://slate.electrik.dev/llms-full.txt): Index plus concatenated markdown docs.
- Prefer `.md` URLs for component pages when pasting into models.