# 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.


---

# Full documentation dump

Below is concatenated markdown from the docs site. Prefer individual `.md` URLs when possible.

---

Source: https://slate.electrik.dev/docs/getting-started/introduction.md

---
title: "Introduction"
description: "What is Slate UI Kit 3.x?"
sidebar_order: 2
sidebar_section: "Getting Started"
---

# Introduction

Slate UI Kit is a set of anonymous Blade components for Laravel — built with **Tailwind CSS v4** and Slate-owned design tokens.

## What is Slate 3.x?

3.x is a ground-up rebuild focused on getting the foundation right:

- **Anonymous Blade components** — no PHP classes, pure templates you can copy and customize
- **OKLCH tokens** — `--slate-*` CSS variables mapped into Tailwind theme colors
- **Native-first forms** — accessible inputs, selects, checkboxes, switches, and radios
- **Livewire-aware** — validation errors and loading states without tight coupling
- **Alpine where needed** — dark mode toggle, dialogs, and other interactive overlays

The current alpha ships core primitives: actions, form controls, field helpers, card, alert, avatar, skeleton, dialog, and more. Additional surfaces continue to land on `3.x`.

## Core principles

### Semantic tokens, not hard-coded colors

Components use Tailwind semantic utilities like `bg-primary`, `text-muted-foreground`, and `border-input`. Under the hood, those map to `--slate-*` variables you can override.

### Variants over raw colors

Use component variants instead of picking colors directly:

<x-code-preview>
@verbatim
<x-slate::button variant="default">Save</x-slate::button>
<x-slate::button variant="destructive">Delete</x-slate::button>
<x-slate::button variant="outline">Cancel</x-slate::button>
@endverbatim
</x-code-preview>

### Composition for forms

Wrap controls with the field system for labels, descriptions, and errors:

<x-code-preview>
@verbatim
<x-slate::field name="email">
    <x-slate::field-label for="email">Email</x-slate::field-label>
    <x-slate::input id="email" name="email" type="email" />
    <x-slate::field-error name="email" />
</x-slate::field>
@endverbatim
</x-code-preview>

## Requirements

- PHP 8.3+
- Laravel 12.0+
- Tailwind CSS v4
- Alpine.js (bundled with Livewire; required for `dark-mode-toggle`)

## Preview

<x-code-preview>
@verbatim
<div class="flex flex-wrap gap-2">
    <x-slate::button>Default</x-slate::button>
    <x-slate::button variant="secondary">Secondary</x-slate::button>
    <x-slate::button variant="outline">Outline</x-slate::button>
    <x-slate::button variant="destructive">Destructive</x-slate::button>
</div>
@endverbatim
</x-code-preview>

## Next steps

- [Installation](/docs/getting-started/installation)
- [Design tokens](/docs/design-tokens)
- [Components](/components)


---

Source: https://slate.electrik.dev/docs/getting-started/installation.md

---
title: "Installation"
description: "Install Slate UI Kit 3.x in your Laravel application"
sidebar_order: 3
sidebar_section: "Getting Started"
---

# Installation

This guide walks through installing **Slate 3.x** in a Laravel 12+ application with Tailwind CSS v4.

## Prerequisites

- PHP 8.3 or higher
- Laravel 12.0+ (Laravel 13 when available)
- Composer
- Node.js and npm
- **Tailwind CSS v4** configured in your project

## Step 1: Install via Composer

Install the 3.x development branch:

<x-code-preview no-render>
@verbatim
composer require electrik/slate:dev-3.x
@endverbatim
</x-code-preview>

## Step 2: Import Slate CSS

Copy or reference Slate's stylesheet, then import it **after** Tailwind in your `resources/css/app.css`:

<x-code-preview no-render>
@verbatim
@import 'tailwindcss';
@import '../../vendor/electrik/slate/resources/css/slate.css';
@endverbatim
</x-code-preview>

`slate.css` ships with:

- Slate-owned OKLCH tokens (`--slate-*`)
- Tailwind v4 `@theme inline` mappings (`bg-background`, `text-foreground`, etc.)
- A `@source` directive that scans Slate Blade components for class names

**Import order matters:** Tailwind first, then `slate.css`.

### Optional: Typography plugin

If you render markdown/prose content, add the typography plugin:

<x-code-preview no-render>
@verbatim
@plugin '@tailwindcss/typography';
@endverbatim
</x-code-preview>

## Step 3: Scan your app templates

Make sure Tailwind scans your Blade views (and Slate's views if you vendor-copy components):

<x-code-preview no-render>
@verbatim
@source '../**/*.blade.php';
@source '../**/*.js';
@source '../../vendor/electrik/slate/resources/views/**/*.blade.php';
@endverbatim
</x-code-preview>

## Step 4: Build assets

<x-code-preview no-render>
@verbatim
npm run build
@endverbatim
</x-code-preview>

Or during development:

<x-code-preview no-render>
@verbatim
npm run dev
@endverbatim
</x-code-preview>

## Step 5: Use components

Components are registered automatically via Slate's service provider:

<x-code-preview no-render>
@verbatim
<x-slate::button>Click me</x-slate::button>
@endverbatim
</x-code-preview>

## Verify the install

1. Add a test route:

<x-code-preview no-render>
@verbatim
Route::get('/test-slate', fn () => view('test-slate'));
@endverbatim
</x-code-preview>

2. Create `resources/views/test-slate.blade.php`:

<x-code-preview no-render>
@verbatim
<x-slate::button>Test Button</x-slate::button>
@endverbatim
</x-code-preview>

3. Visit `/test-slate` — you should see a styled button.

## Troubleshooting

### Components not styled

- Run `npm run build` or `npm run dev`
- Confirm `slate.css` is imported **after** `@import 'tailwindcss'`
- Confirm `@source` includes Slate's Blade views

### Dark mode

Toggle the `.dark` class on `<html>`. Use `<x-slate::dark-mode-toggle />` or your own theme switcher.

## Next steps

- [Introduction](/docs/getting-started/introduction)
- [Design tokens](/docs/design-tokens)
- [Components](/components)


---

Source: https://slate.electrik.dev/docs/philosophy.md

---
title: "Philosophy"
description: "The design principles and philosophy behind Slate UI Kit"
sidebar_order: 1
sidebar_section: "Core Concepts"
---

# Philosophy

Slate is built on a simple philosophy: **your UI should belong to you**.

## Open code

Slate follows an open-code approach:

- You see the code
- You can publish and customize components
- You're never stuck with a black box

## Ownership

When you install Slate, you're not installing a black box. You're getting:

- **Copyable components** - All components are Blade templates you can modify
- **No vendor lock-in** - If you outgrow Slate, your code still works
- **Full control** - Customize, extend, or replace any component

## Unopinionated Design

Slate doesn't force you into a specific design system:

- No forced layouts
- No admin panel abstractions
- No design system lock-in
- No proprietary magic

You stay in control of your code.

## Open Source, Open Code

Slate is open source under the MIT license. More importantly, the code is open:

- All components are in your `vendor` directory
- You can publish and modify them
- You can see exactly how they work

## Why This Matters

Traditional UI libraries lock you in. Slate gives you freedom:

- **Flexibility** - Adapt components to your needs
- **Transparency** - See exactly what's happening
- **Independence** - Your code works even if Slate changes

If you outgrow Slate, your code still works.


---

Source: https://slate.electrik.dev/docs/design-tokens.md

---
title: "Design Tokens"
description: "Slate-owned OKLCH CSS variables and Tailwind theme mappings"
sidebar_order: 5
sidebar_section: "Core Concepts"
---

# Design Tokens

Slate 3.x expresses design decisions as **Slate-owned CSS variables** (`--slate-*`) in OKLCH color space. Tailwind v4 theme colors map those variables so components use semantic utilities like `bg-background` and `text-primary`.

Prefer clicking swatches? Open the **[Themes playground](/themes)**.

Token **names** below are frozen for rename — see [API freeze](/docs/api-freeze).

## Architecture

```
--slate-* variables (OKLCH)
        ↓
@theme inline mappings in slate.css
        ↓
Tailwind utilities (bg-primary, border-input, …)
        ↓
Blade components
```

## Base tokens

| Token | Tailwind utility | Purpose |
|-------|------------------|---------|
| `--slate-background` | `bg-background` | Page background |
| `--slate-foreground` | `text-foreground` | Primary text |
| `--slate-card` | `bg-card` | Elevated surfaces |
| `--slate-border` | `border-border` | Default borders |
| `--slate-input` | `border-input` | Form control borders |
| `--slate-ring` | `ring-ring` | Focus rings |
| `--slate-radius` | `rounded-*` scale | Global border radius |

## Semantic colors

| Token | Tailwind utility | Purpose |
|-------|------------------|---------|
| `--slate-primary` | `bg-primary` | Primary actions |
| `--slate-secondary` | `bg-secondary` | Secondary actions |
| `--slate-muted` | `bg-muted` | Subtle backgrounds |
| `--slate-accent` | `bg-accent` | Hover/highlight states |
| `--slate-destructive` | `bg-destructive` | Destructive actions |

Foreground pairs exist for each (`--slate-primary-foreground`, etc.).

## State colors (foundation)

These tokens are defined for future component variants:

| Token | Purpose |
|-------|---------|
| `--slate-success` | Positive feedback |
| `--slate-warning` | Caution states |
| `--slate-info` | Informational states |
| `--slate-destructive-foreground` | Text on destructive surfaces |

Not all state tokens have component variants yet — they're part of the token foundation.

## Customizing

Override variables after importing `slate.css`:

<x-code-preview no-render lang="css">
@verbatim
@import 'tailwindcss';
@import '../../vendor/electrik/slate/resources/css/slate.css';

:root {
    --slate-primary: oklch(0.45 0.2 260);
    --slate-primary-foreground: oklch(0.98 0 0);
    --slate-radius: 0.5rem;
}

.dark {
    --slate-primary: oklch(0.75 0.15 260);
}
@endverbatim
</x-code-preview>

## Dark mode

Dark values live under the `.dark` selector in `slate.css`. Toggle dark mode by adding/removing `.dark` on `<html>`:

<x-code-preview>
@verbatim
<x-slate::dark-mode-toggle />
@endverbatim
</x-code-preview>

## Where tokens live

All defaults are in `vendor/electrik/slate/resources/css/slate.css`. Components never hard-code hex values — they use Tailwind semantic classes that resolve through the theme map.


---

Source: https://slate.electrik.dev/docs/api-freeze.md

---
title: "API freeze"
description: "Frozen progressive props, toast event shape, and design token names for Slate 3.x"
sidebar_order: 6
sidebar_section: "Core Concepts"
---

# API freeze

Slate `3.x` is still **alpha**, but the contracts below are **frozen for rename**. Treat them as stable for apps and agents. Other surfaces may still move and are marked **experimental** when needed.

Do not rename these props, event fields, or CSS variables without a major version.

## Progressive form props (frozen)

These props auto-compose `field` / `field-label` / `field-description` / `field-error` on form controls:

| Prop | Role |
| --- | --- |
| `label` | Accessible control label |
| `description` | Help text under the control |
| `errorMessage` | Explicit error copy (alongside Livewire/`$errors`) |
| `name` / `errorKey` | Validation key wiring |
| `showError` | Whether to render the error slot (where supported) |

**Frozen on:** `input`, `textarea`, `select`, `checkbox`, `switch`, `radio`, `radio-group`, `file-input`.

`help` remains a **deprecated alias** of `description` on text-like controls — prefer `description`.

```blade
<x-slate::input
    label="Email"
    type="email"
    wire:model="email"
    description="We will never share your email."
    errorMessage="Please enter a valid email address."
/>
```

## Toast event shape (frozen)

| | |
| --- | --- |
| **Event** | `slate-toast` on `window` |
| **Listen** | `<x-slate::toaster />` (`@slate-toast.window`) |

**`detail` fields (frozen names):**

| Field | Type | Notes |
| --- | --- | --- |
| `id` | `string?` | Auto-generated when omitted |
| `title` | `string?` | Primary text |
| `description` | `string?` | Secondary text |
| `variant` | `string?` | `default` \| `destructive` \| `success` \| `warning` \| `info` |
| `duration` | `number?` | ms; `0` = no auto-dismiss; default from toaster `duration` |

```js
window.dispatchEvent(new CustomEvent('slate-toast', {
  detail: {
    title: 'Saved',
    description: 'Your changes were stored.',
    variant: 'success',
    duration: 4000,
  },
}))
```

Action buttons stay **compositional** (`toast-action`) — not part of the event payload.

## Design tokens (frozen names)

Do not rename these `--slate-*` variables. Values may still be tuned before stable.

| Group | Tokens |
| --- | --- |
| **Core** | `--slate-radius`, `--slate-background`, `--slate-foreground`, `--slate-card`, `--slate-card-foreground`, `--slate-popover`, `--slate-popover-foreground` |
| **Brand** | `--slate-primary`, `--slate-primary-foreground`, `--slate-secondary`, `--slate-secondary-foreground`, `--slate-muted`, `--slate-muted-foreground`, `--slate-accent`, `--slate-accent-foreground` |
| **Status** | `--slate-destructive`, `--slate-destructive-foreground`, `--slate-success`, `--slate-success-foreground`, `--slate-warning`, `--slate-warning-foreground`, `--slate-info`, `--slate-info-foreground` |
| **Chrome** | `--slate-border`, `--slate-input`, `--slate-ring` |
| **Sidebar** | `--slate-sidebar`, `--slate-sidebar-foreground`, `--slate-sidebar-accent`, `--slate-sidebar-accent-foreground`, `--slate-sidebar-border`, `--slate-sidebar-ring` |

Full tables: [Design tokens](/docs/design-tokens). Playground: [Themes](/themes).

## Experimental

Still free to change before stable `3.0.0`:

- Calendar / combobox / chart **depth** (behavior beyond the current markup)
- Nested overlay stacking edge cases beyond scroll-lock + topmost Escape
- MCP tool names and response shapes (`@electrik/slate-mcp` alpha)
- Block gallery markup on the docs site

When a page or prop is experimental, docs say so explicitly. Prefer frozen contracts when generating Blade for consumers.

## Related

- [Form matrix](/docs/form-matrix)
- [Livewire](/docs/livewire)
- [Accessibility](/docs/accessibility)
- [Compatibility](/docs/compatibility)


---

Source: https://slate.electrik.dev/docs/form-matrix.md

---
title: "Form matrix"
description: "Every form control with label, description, errorMessage, and Livewire wire:model"
sidebar_order: 7
sidebar_section: "Core Concepts"
---

# Form matrix

Frozen progressive props (`label`, `description`, `errorMessage`) work the same across Slate form controls. Pair them with Livewire `wire:model` without wrapping markup by hand.

See also [API freeze](/docs/api-freeze) and [Livewire](/docs/livewire).

## Matrix

| Control | `label` | `description` | `errorMessage` | Livewire |
| --- | --- | --- | --- | --- |
| `input` | ✓ | ✓ | ✓ | `wire:model` |
| `textarea` | ✓ | ✓ | ✓ | `wire:model` |
| `select` | ✓ | ✓ | ✓ | `wire:model` |
| `checkbox` | ✓ | ✓ | ✓ | `wire:model` |
| `switch` | ✓ | ✓ | ✓ | `wire:model` |
| `radio` | ✓ | ✓ | ✓ | `wire:model` |
| `radio-group` | ✓ | ✓ | ✓ | `wire:model` on the group |
| `file-input` | ✓ | ✓ | ✓ | `wire:model` |

## Snippets

### Input

```blade
<x-slate::input
    label="Email"
    type="email"
    wire:model="email"
    description="We will never share your email."
    errorMessage="Please enter a valid email address."
/>
```

### Textarea

```blade
<x-slate::textarea
    label="Bio"
    wire:model="bio"
    description="A short introduction."
    errorMessage="Bio is required."
/>
```

### Select

```blade
<x-slate::select
    label="Plan"
    wire:model="plan"
    description="You can change this later."
    errorMessage="Choose a plan."
>
    <option value="starter">Starter</option>
    <option value="pro">Pro</option>
</x-slate::select>
```

### Checkbox

```blade
<x-slate::checkbox
    label="Product updates"
    wire:model="marketing"
    description="Occasional release notes."
    errorMessage="Confirm your preference."
/>
```

### Switch

```blade
<x-slate::switch
    label="Airplane mode"
    wire:model="airplane"
    description="Disable radios while flying."
    errorMessage="Unable to save preference."
/>
```

### Radio group

```blade
<x-slate::radio-group
    label="Notify me about"
    wire:model="notify"
    description="Choose one channel."
    errorMessage="Pick a notification channel."
>
    <x-slate::radio-group-item value="email" label="Email" />
    <x-slate::radio-group-item value="sms" label="SMS" />
</x-slate::radio-group>
```

### File input

```blade
<x-slate::file-input
    label="Avatar"
    wire:model="avatar"
    description="PNG or JPG up to 2MB."
    errorMessage="Upload a valid image."
/>
```

## Composition alternative

When you need custom layout, compose the field helpers yourself:

```blade
<x-slate::field name="email">
    <x-slate::field-label for="email">Email</x-slate::field-label>
    <x-slate::input id="email" type="email" wire:model="email" />
    <x-slate::field-description>We will never share your email.</x-slate::field-description>
    <x-slate::field-error name="email" />
</x-slate::field>
```

## Sandbox

The consumer smoke page and local sandbox exercise progressive props with invalid/`errorMessage` states. Prefer those pages when verifying Livewire wiring end-to-end.


---

Source: https://slate.electrik.dev/docs/livewire.md

---
title: "Livewire"
description: "Using Slate with Laravel Livewire"
sidebar_order: 4
sidebar_section: "Compatibility"
---

# Livewire

Slate works with Laravel Livewire out of the box — `wire:model`, validation errors, loading states, and Alpine overlays all play nicely together.

## Installation

```bash
composer require livewire/livewire
composer require electrik/slate
```

## Buttons and actions

```blade
{{-- resources/views/livewire/counter.blade.php --}}
<div>
    <x-slate::button wire:click="increment">
        Count: {{ $count }}
    </x-slate::button>
</div>
```

## Form controls

Progressive props (`label`, `description`, `errorMessage`) compose the field helpers automatically. Livewire validation keys are detected from `wire:model` / `name`.

```blade
<form wire:submit="save" class="grid max-w-md gap-4">
    <x-slate::input
        label="Name"
        wire:model="name"
        description="How you appear on invoices."
    />

    <x-slate::textarea
        label="Bio"
        wire:model.blur="bio"
    />

    <x-slate::select label="Country" wire:model="country">
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
    </x-slate::select>

    <x-slate::checkbox
        label="Subscribe"
        description="Product updates only."
        wire:model="subscribe"
    />

    <x-slate::button type="submit" wire:loading.attr="disabled">
        <span wire:loading.remove>Save</span>
        <span wire:loading>Saving…</span>
    </x-slate::button>
</form>
```

Or let Slate handle the busy UI when you use `wire:click` / `wire:submit` with `loading-text`:

```blade
<x-slate::button wire:click="save" loading-text="Saving…">
    Save
</x-slate::button>
```

For static docs demos (no Livewire), use the `loading` prop or Alpine — see [Button](/components/button).

## Toast from Livewire

Mount `<x-slate::toaster />` once in your layout, then dispatch a browser event after an action:

```php
// app/Livewire/ProfileForm.php
public function save(): void
{
    $this->validate();
    // ...

    $this->dispatch('slate-toast',
        title: 'Saved',
        description: 'Your profile was updated.',
        variant: 'success',
    );
}
```

Livewire v3 browser events bubble as `slate-toast` with a `detail` payload — the toaster listens on `window`.

You can also listen in Alpine:

```blade
<div @slate-toast.window="console.log($event.detail)">
    …
</div>
```

## Dialogs and sheets

Keep Alpine state on the Slate root; call Livewire from actions inside:

```blade
<x-slate::dialog>
    <x-slate::dialog-trigger>
        <x-slate::button variant="outline">Delete account</x-slate::button>
    </x-slate::dialog-trigger>

    <x-slate::dialog-content title="Are you sure?" description="This cannot be undone.">
        <x-slot:footer>
            <x-slate::dialog-close>
                <x-slate::button variant="outline">Cancel</x-slate::button>
            </x-slate::dialog-close>
            <x-slate::button variant="destructive" wire:click="delete">
                Delete
            </x-slate::button>
        </x-slot:footer>
    </x-slate::dialog-content>
</x-slate::dialog>
```

## Best practices

1. Prefer `wire:model` / `wire:model.live` / `wire:model.blur` on Slate controls — error wiring is automatic.
2. Put one `toaster` in the layout; fire `slate-toast` from components or Alpine.
3. Don’t nest Alpine `x-data` roots that fight Livewire morphing on the same node as `wire:*`.
4. Use `wire:loading` on buttons/spinners for submit feedback.

## Related

- [Toast](/components/toast)
- [Input](/components/input)
- [Field](/components/field)
- [Livewire Documentation](https://livewire.laravel.com)


---

Source: https://slate.electrik.dev/docs/ai.md

---
title: "AI & MCP"
description: "llms.txt, MCP server, and Cursor rules for Electrik Slate"
sidebar_section: "Getting Started"
sidebar_order: 45
---

# AI & MCP

Slate is built so agents can read real Blade APIs instead of inventing React/shadcn. Use the docs index, the MCP server, or a Cursor rule.

## llms.txt

Point tools that support [llms.txt](https://llmstxt.org/) at:

- https://slate.electrik.dev/llms.txt — curated index of docs, components, blocks, and examples
- https://slate.electrik.dev/llms-full.txt — index plus concatenated markdown

Component pages also ship as markdown:

```text
https://slate.electrik.dev/components/button.md
```

Docs page actions include **View as Markdown** and **Open in ChatGPT / Claude / v0 / Scira** with the live page URL in the prompt.

## MCP server (read-only)

Slate exposes the same read-only MCP tools in two ways:

1. **Remote (Cloudflare)** — paste a URL into Cursor (no local Node process)
2. **Local (npm)** — `npx @electrik/slate-mcp` over stdio

Both can:

- list shipped components and blocks
- fetch component docs (markdown)
- fetch Blade source from the `3.x` branch on GitHub
- pull `llms.txt`

They do **not** install packages. Slate is Composer-based:

```bash
composer require electrik/slate:^3.0@alpha
```

### Cursor — remote MCP (recommended)

After the Worker is deployed (`mcp/worker` in the Slate repo):

```json
{
  "mcpServers": {
    "slate": {
      "url": "https://mcp.slate.electrik.dev"
    }
  }
}
```

Optional custom domain later: `https://mcp.slate.electrik.dev` (configure in Cloudflare Worker settings).

### Cursor — local npm

```json
{
  "mcpServers": {
    "slate": {
      "command": "npx",
      "args": ["-y", "@electrik/slate-mcp"]
    }
  }
}
```

```bash
npm install -g @electrik/slate-mcp
# or one-shot:
npx -y @electrik/slate-mcp
```

Optional env:

| Variable | Default | Purpose |
| --- | --- | --- |
| `SLATE_DOCS_URL` | `https://slate.electrik.dev` | Docs / markdown base |
| `SLATE_SOURCE_URL` | GitHub raw `3.x` | Blade source base |

### Example prompts

- List Slate form components and show me the input docs
- Fetch the dialog Blade source and build a confirm flow
- Use the login block pattern with progressive field props

## Cursor rule

Copy [AGENTS.md](https://github.com/electrikhq/slate/blob/3.x/AGENTS.md) into your app, or add `.cursor/rules/slate.mdc` from the Slate repo. It covers progressive props, anonymous Blade, tokens, and Livewire patterns.

## Related

- [Installation](/docs/getting-started/installation)
- [Philosophy](/docs/philosophy)
- [Blocks](/blocks)
- [Components](/components)


---

Source: https://slate.electrik.dev/docs/theming.md

---
title: "Theming"
description: "Customize Slate colors with OKLCH tokens and the live themes playground"
sidebar_section: "Core Concepts"
sidebar_order: 4
---

# Theming

Slate 3.x themes through **Slate-owned OKLCH CSS variables** (`--slate-*`). Tailwind utilities like `bg-primary` map to those tokens.

Prefer a visual tour? Open the playground:

**[Themes & tokens →](/themes)**

## Quick override

After importing `slate.css`, override variables in your app CSS:

```css
:root {
  --slate-primary: oklch(0.45 0.2 264);
  --slate-primary-foreground: oklch(0.98 0 0);
}

.dark {
  --slate-primary: oklch(0.72 0.14 264);
  --slate-primary-foreground: oklch(0.2 0 0);
}
```

## Token reference

See [Design Tokens](/docs/design-tokens) for the full surface / brand / status / sidebar list, nested `.light` / `.dark` islands, and architecture notes.

## Related

- [Design Tokens](/docs/design-tokens)
- [Customization](/docs/customization)
- [Dark Mode](/docs/dark-mode)
- [Themes playground](/themes)


---

Source: https://slate.electrik.dev/docs/blocks.md

---
title: "Blocks"
description: "Reusable Blade sections composed from Slate components"
sidebar_section: "Getting Started"
sidebar_order: 40
---

# Blocks

Blocks are copy-ready UI sections composed from Slate components — login cards, pricing strips, app shells, and more. They are examples, not installable packages.

Browse the live gallery:

**[Open Blocks →](/blocks)**

## What’s included

| Block | Category |
| --- | --- |
| [Login](/blocks/login) | Auth |
| [Register](/blocks/register) | Auth |
| [Settings](/blocks/settings) | Application |
| [App shell](/blocks/app-shell) | Application |
| [Empty state](/blocks/empty-state) | Application |
| [Pricing](/blocks/pricing) | Marketing |
| [Form validation](/blocks/form-validation) | Forms |
| [Toast action](/blocks/toast-action) | Feedback |
| [Hero](/blocks/hero) | Marketing |

## How to use a block

1. Open the block preview
2. Copy the Blade from the docs site source (or adapt the pattern)
3. Paste into your Laravel view and wire forms to your routes / Livewire

For full pages, see **[Examples](/examples)**.


---

Source: https://slate.electrik.dev/docs/examples.md

---
title: "Examples"
description: "Full-page Blade examples built with Slate"
sidebar_section: "Getting Started"
sidebar_order: 41
---

# Examples

Full-bleed pages composed from Slate primitives. Use them as starting points for auth, dashboards, and marketing.

**[Open Examples →](/examples)**

| Example | Category |
| --- | --- |
| [Login](/examples/login) | Auth |
| [Register](/examples/register) | Auth |
| [Dashboard](/examples/dashboard) | Application |
| [Landing](/examples/landing) | Marketing |

Prefer smaller sections? Start with **[Blocks](/blocks)**.


---

Source: https://slate.electrik.dev/docs/accessibility.md

---
title: "Accessibility"
description: "Accessibility features and best practices in Slate UI Kit"
sidebar_order: 1
sidebar_section: "Advanced"
---

# Accessibility

Slate is built with accessibility in mind.

## WCAG 2.1 AA Compliance

All Slate components aim for WCAG 2.1 AA compliance:

- ✅ Proper ARIA attributes
- ✅ Keyboard navigation
- ✅ Screen reader support
- ✅ Color contrast ratios

## ARIA Attributes

Components include appropriate ARIA attributes:

- `aria-label` for icon-only buttons
- `aria-expanded` for collapsible components
- `aria-describedby` for form inputs
- `role` attributes where needed

## Keyboard Navigation

All interactive components support keyboard navigation:

- Tab to focus
- Enter/Space to activate
- Escape to close modals (topmost overlay only when nested)
- Arrow keys for navigation

## Overlays

`dialog`, `sheet`, `drawer`, and `alert-dialog` share:

- Focus move into the panel on open, restore to the trigger on close
- Tab cycle inside the panel
- Escape closes only the **topmost** open overlay
- `html.slate-scroll-lock` while any overlay is open (nesting-safe count)
- `prefers-reduced-motion` short-circuits overlay transitions

## Reduced motion & RTL

- Prefer logical props (`start` / `end`) on sheets, drawers, and toaster placement
- Overlay slide directions flip under `[dir="rtl"]`
- Buttons, accordion, sidebar, app-shell, and overlays respect `prefers-reduced-motion` / `motion-reduce`

## Screen Readers

Components are designed to work with screen readers:

- Semantic HTML
- Proper heading hierarchy
- Descriptive labels
- Status announcements

## Color Contrast

All color combinations meet WCAG AA standards:

- Text on backgrounds
- Interactive elements
- Focus indicators
- Error states

## Best Practices

1. **Use semantic HTML** - Slate components use proper elements
2. **Add labels** - Always label form inputs
3. **Test with screen readers** - Verify accessibility
4. **Keyboard only** - Test without a mouse

## Resources

- [WCAG Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
- [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
- [WebAIM](https://webaim.org/)


---

Source: https://slate.electrik.dev/components/button.md

---
title: "Button"
description: "Displays a button or a component that looks like a button."
sidebar_order: 1
---

# Button

Displays a button or a link styled as a button.

## Usage

<x-code-preview>
@verbatim
<x-slate::button>Button</x-slate::button>
@endverbatim
</x-code-preview>

## Variants

Use the `variant` prop to change the visual style.

<x-code-preview>
@verbatim
<div class="flex flex-wrap gap-2">
    <x-slate::button variant="default">Default</x-slate::button>
    <x-slate::button variant="secondary">Secondary</x-slate::button>
    <x-slate::button variant="outline">Outline</x-slate::button>
    <x-slate::button variant="ghost">Ghost</x-slate::button>
    <x-slate::button variant="destructive">Destructive</x-slate::button>
    <x-slate::button variant="link">Link</x-slate::button>
</div>
@endverbatim
</x-code-preview>

## Sizes

<x-code-preview>
@verbatim
<div class="flex flex-wrap items-center gap-2">
    <x-slate::button size="xs">Extra small</x-slate::button>
    <x-slate::button size="sm">Small</x-slate::button>
    <x-slate::button size="default">Default</x-slate::button>
    <x-slate::button size="lg">Large</x-slate::button>
</div>
@endverbatim
</x-code-preview>

## Icon buttons

Use `size="icon-*"` for square icon-only buttons. Put SVG or icon components in the slot.

<x-code-preview>
@verbatim
<x-slate::button size="icon" variant="outline" aria-label="Settings">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
        <circle cx="12" cy="12" r="3"/>
    </svg>
</x-slate::button>
@endverbatim
</x-code-preview>

## Links

Render as an anchor with `as="a"` and an `href`:

<x-code-preview>
@verbatim
<x-slate::button as="a" href="/dashboard" variant="outline">
    Go to dashboard
</x-slate::button>
@endverbatim
</x-code-preview>

## Loading

Use the `loading` prop for a forced busy state (docs, Alpine demos, non-Livewire apps). Pair with `loadingText` for the busy label.

### Forced state

<x-code-preview>
@verbatim
<div class="flex flex-wrap gap-2">
    <x-slate::button loading>Save</x-slate::button>
    <x-slate::button loading loading-text="Saving…">Save</x-slate::button>
    <x-slate::button variant="outline" loading loading-text="Please wait">Continue</x-slate::button>
</div>
@endverbatim
</x-code-preview>

### Alpine demo

Toggle loading in the browser — works on static exports (no Livewire):

<x-code-preview>
@verbatim
<div
    x-data="{
        loading: false,
        async save() {
            if (this.loading) return;
            this.loading = true;
            await new Promise((resolve) => setTimeout(resolve, 1400));
            this.loading = false;
        }
    }"
    class="flex flex-wrap gap-2"
>
    <x-slate::button
        x-bind:disabled="loading"
        x-bind:aria-busy="loading"
        x-on:click="save()"
    >
        <span x-show="!loading" class="inline-flex items-center gap-2">
            Save changes
        </span>
        <span x-show="loading" x-cloak class="inline-flex items-center gap-2">
            <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-90" fill="currentColor" d="M12 2a10 10 0 0 1 10 10h-4a6 6 0 0 0-6-6V2z"></path>
            </svg>
            Saving…
        </span>
    </x-slate::button>
</div>
@endverbatim
</x-code-preview>

## Livewire loading

When you pass `wire:click` / `wire:submit`, the button wires `wire:loading` automatically. Use `loadingText` for the busy label:

```blade
<x-slate::button wire:click="save" loading-text="Saving…">
    Save
</x-slate::button>
```

The control disables for the request and swaps to a spinner + loading text. See [Livewire](/docs/livewire) for more.

## Disabled

<x-code-preview>
@verbatim
<x-slate::button disabled>Disabled</x-slate::button>
@endverbatim
</x-code-preview>

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `default`, `secondary`, `outline`, `ghost`, `destructive`, `link` | `default` | Visual style |
| `size` | `xs`, `sm`, `default`, `lg`, `icon`, `icon-xs`, `icon-sm`, `icon-lg` | `default` | Size preset |
| `rounded` | `none`, `sm`, `md`, `lg`, `xl`, `full` | `md` | Border radius |
| `animation` | `auto`, `none`, `subtle`, `lift` | `auto` | Hover micro-animation |
| `loading` | `bool` | `false` | Forced busy state (spinner + disabled) |
| `loadingText` | `string` | `null` | Busy label for `loading` or Livewire `wire:loading` |
| `as` | `button`, `a` | `button` | HTML element |
| `type` | `button`, `submit`, `reset` | `button` | Button type when `as="button"` |


---

Source: https://slate.electrik.dev/components/badge.md

---
title: "Badge"
description: "A small flat label for status, counts, and categories."
sidebar_order: 2
---

# Badge

A compact, unshadowed label. Use it for status, counts, and inline metadata.

## Usage

<x-code-preview>
@verbatim
<x-slate::badge>Badge</x-slate::badge>
@endverbatim
</x-code-preview>

## Variants

<x-code-preview>
@verbatim
<div class="flex flex-wrap gap-2">
    <x-slate::badge>Default</x-slate::badge>
    <x-slate::badge variant="secondary">Secondary</x-slate::badge>
    <x-slate::badge variant="outline">Outline</x-slate::badge>
    <x-slate::badge variant="destructive">Destructive</x-slate::badge>
</div>
@endverbatim
</x-code-preview>

## As a link

<x-code-preview>
@verbatim
<x-slate::badge as="a" variant="outline" href="/components">
    New
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6" /></svg>
</x-slate::badge>
@endverbatim
</x-code-preview>

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `default`, `secondary`, `outline`, `destructive` | `default` | Visual style |
| `as` | `span`, `a` | `span` | HTML element |


---

Source: https://slate.electrik.dev/components/card.md

---
title: "Card"
description: "A flexible container with header, content, and footer sections."
sidebar_order: 3
sidebar_section: "Layout"
---

# Card

Displays a card with header, content, and footer.

## Usage

<x-code-preview>
@verbatim
<x-slate::card class="w-full max-w-sm">
    <x-slate::card-header>
        <x-slate::card-title>Login to your account</x-slate::card-title>
        <x-slate::card-description>
            Enter your email below to login to your account
        </x-slate::card-description>
        <x-slate::card-action>
            <x-slate::button as="a" href="#" variant="link" size="sm" class="h-auto p-0">
                Sign Up
            </x-slate::button>
        </x-slate::card-action>
    </x-slate::card-header>
    <x-slate::card-content class="grid gap-4">
        <x-slate::field>
            <x-slate::field-label for="card-email">Email</x-slate::field-label>
            <x-slate::input id="card-email" type="email" placeholder="m@example.com" />
        </x-slate::field>
        <x-slate::field>
            <div class="flex items-center justify-between gap-2">
                <x-slate::field-label for="card-password">Password</x-slate::field-label>
                <x-slate::button as="a" href="#" variant="link" size="sm" class="h-auto p-0 font-normal">
                    Forgot your password?
                </x-slate::button>
            </div>
            <x-slate::input id="card-password" type="password" />
        </x-slate::field>
    </x-slate::card-content>
    <x-slate::card-footer class="flex-col gap-2">
        <x-slate::button class="w-full">Login</x-slate::button>
        <x-slate::button class="w-full" variant="outline">Login with Google</x-slate::button>
    </x-slate::card-footer>
</x-slate::card>
@endverbatim
</x-code-preview>

## Composition

```
Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter
```

## Size

Use `size="sm"` for tighter spacing.

<x-code-preview>
@verbatim
<x-slate::card size="sm" class="w-full max-w-sm">
    <x-slate::card-header>
        <x-slate::card-title>Scheduled reports</x-slate::card-title>
        <x-slate::card-description>
            Weekly snapshots. No more manual exports.
        </x-slate::card-description>
    </x-slate::card-header>
    <x-slate::card-content>
        <ul class="grid gap-3 text-sm">
            <li class="flex items-center gap-2">
                <svg class="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6" /></svg>
                Choose a schedule (daily, or weekly).
            </li>
            <li class="flex items-center gap-2">
                <svg class="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6" /></svg>
                Send to channels or specific teammates.
            </li>
            <li class="flex items-center gap-2">
                <svg class="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6" /></svg>
                Include charts, tables, and key metrics.
            </li>
        </ul>
    </x-slate::card-content>
    <x-slate::card-footer class="flex-col gap-2">
        <x-slate::button class="w-full rounded-full">Set up scheduled reports</x-slate::button>
        <x-slate::button class="w-full rounded-full" variant="outline">See what's new</x-slate::button>
    </x-slate::card-footer>
</x-slate::card>
@endverbatim
</x-code-preview>

## Spacing

Override `--card-spacing` on the root. Defaults to `1.5rem` (`size="sm"` uses `0.75rem`).

<x-code-preview>
@verbatim
<div class="flex flex-wrap gap-2">
    <x-slate::button size="sm" variant="outline" disabled>16px</x-slate::button>
    <x-slate::button size="sm" variant="outline" disabled>20px</x-slate::button>
    <x-slate::button size="sm" variant="outline" disabled>24px</x-slate::button>
    <x-slate::button size="sm" variant="outline" disabled>32px</x-slate::button>
</div>

<div class="mt-4 grid gap-4 lg:grid-cols-2">
    <x-slate::card class="[--card-spacing:1rem]">
        <x-slate::card-header>
            <x-slate::card-title>16px</x-slate::card-title>
            <x-slate::card-description>Tighter inset via CSS variable.</x-slate::card-description>
        </x-slate::card-header>
        <x-slate::card-content>
            <p class="text-sm text-muted-foreground">Useful for dense dashboards.</p>
        </x-slate::card-content>
        <x-slate::card-footer>
            <x-slate::button size="sm" class="w-full">Continue</x-slate::button>
        </x-slate::card-footer>
    </x-slate::card>

    <x-slate::card class="[--card-spacing:2rem]">
        <x-slate::card-header>
            <x-slate::card-title>32px</x-slate::card-title>
            <x-slate::card-description>Roomier inset for marketing surfaces.</x-slate::card-description>
        </x-slate::card-header>
        <x-slate::card-content>
            <p class="text-sm text-muted-foreground">Matches the largest spacing preset.</p>
        </x-slate::card-content>
        <x-slate::card-footer>
            <x-slate::button size="sm" class="w-full">Continue</x-slate::button>
        </x-slate::card-footer>
    </x-slate::card>
</div>
@endverbatim
</x-code-preview>

## Dividers and edge-to-edge content

Add `border-b` on the header when you want a top divider. Footer already includes a muted bar and top border. Bleed scrollable content with negative margin.

<x-code-preview>
@verbatim
<x-slate::card class="w-full max-w-lg">
    <x-slate::card-header class="border-b">
        <x-slate::card-title>Terms of Service</x-slate::card-title>
        <x-slate::card-description>
            Review the terms before accepting the agreement.
        </x-slate::card-description>
    </x-slate::card-header>
    <x-slate::card-content class="-my-[var(--card-spacing)] max-h-40 space-y-4 overflow-y-auto py-[var(--card-spacing)] text-sm">
        <p>
            These terms govern your use of the workspace, including access to shared
            documents, project files, and collaboration tools.
        </p>
        <p>
            You are responsible for the content you upload and for ensuring that your
            team has the appropriate permissions to view or edit it.
        </p>
        <p>
            We may update features or limits as the service evolves. When those changes
            materially affect your workflow, we will notify your workspace administrators.
        </p>
        <p>
            By continuing, you agree to keep your account credentials secure and to
            follow your organization's acceptable use policies.
        </p>
    </x-slate::card-content>
    <x-slate::card-footer class="justify-end gap-2">
        <x-slate::button variant="outline">Decline</x-slate::button>
        <x-slate::button>Accept</x-slate::button>
    </x-slate::card-footer>
</x-slate::card>
@endverbatim
</x-code-preview>

## API Reference

### Card

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `default` \| `sm` | `default` | Sets `--card-spacing` to `1.5rem` or `0.75rem` |
| `as` | `string` | `div` | Root HTML element |

### Parts

`card-header`, `card-title`, `card-description`, `card-action`, `card-content`, and `card-footer` all accept `as` and any HTML attributes (`class`, `id`, etc.).

Add `border-b` on the header when you want a top divider. Footer already includes a muted bar and top border. Bleed content with negative margin.

## Related

- [Button](/components/button)
- [Input](/components/input)
- [Field](/components/field)
- [Badge](/components/badge)


---

Source: https://slate.electrik.dev/components/alert.md

---
title: "Alert"
description: "Displays a callout for user attention."
sidebar_order: 4
sidebar_section: "Feedback"
---

# Alert

Displays a callout for user attention. Use composition parts, or pass `title` / `description` for the progressive prop API.

## Usage

<x-code-preview>
@verbatim
<x-slate::alert
    title="Payment successful"
    description="Your payment of $29.99 has been processed. A receipt has been sent to your email address."
>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <circle cx="12" cy="12" r="10" />
        <path d="m9 12 2 2 4-4" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
</x-slate::alert>
@endverbatim
</x-code-preview>

## Composition

```
Alert
├── Icon (optional SVG)
├── AlertTitle
├── AlertDescription
└── AlertAction
```

Prefer the prop API for typical callouts. Compose manually when you need custom markup:

<x-code-preview>
@verbatim
<x-slate::alert>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <circle cx="12" cy="12" r="10" />
        <path d="M12 16v-4" stroke-linecap="round" />
        <path d="M12 8h.01" stroke-linecap="round" />
    </svg>
    <x-slate::alert-title>New feature available</x-slate::alert-title>
    <x-slate::alert-description>
        We've added dark mode support. You can enable it in your account settings.
    </x-slate::alert-description>
</x-slate::alert>
@endverbatim
</x-code-preview>

## Destructive

Use `variant="destructive"` for error-style callouts.

<x-code-preview>
@verbatim
<x-slate::alert
    variant="destructive"
    title="Payment failed"
    description="Your payment could not be processed. Please check your payment method and try again."
>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <circle cx="12" cy="12" r="10" />
        <path d="m15 9-6 6" stroke-linecap="round" />
        <path d="m9 9 6 6" stroke-linecap="round" />
    </svg>
</x-slate::alert>
@endverbatim
</x-code-preview>

## Status variants

Slate also ships `success`, `warning`, and `info` using the semantic theme tokens.

<x-code-preview>
@verbatim
<div class="grid gap-3">
    <x-slate::alert variant="success" title="Synced" description="Your workspace finished syncing." />
    <x-slate::alert variant="warning" title="Quota almost full" description="You have used 90% of your plan." />
    <x-slate::alert variant="info" title="Tip" description="You can invite teammates from Settings." />
</div>
@endverbatim
</x-code-preview>

## Action

Pass an `action` slot for a button in the top-end corner.

<x-code-preview>
@verbatim
<x-slate::alert
    title="Dark mode is now available"
    description="Enable it under your profile settings to get started."
>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <circle cx="12" cy="12" r="10" />
        <path d="M12 16v-4" stroke-linecap="round" />
        <path d="M12 8h.01" stroke-linecap="round" />
    </svg>
    <x-slot:action>
        <x-slate::button size="sm" variant="outline">Enable</x-slate::button>
    </x-slot:action>
</x-slate::alert>
@endverbatim
</x-code-preview>

## API Reference

### Alert

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `default` \| `destructive` \| `success` \| `warning` \| `info` | `default` | Visual tone |
| `title` | `string` | — | Compose `alert-title` automatically |
| `description` | `string` | — | Compose `alert-description` automatically |
| `as` | `string` | `div` | Root HTML element |

Named slot: `action` → wraps content in `alert-action`.

### Parts

`alert-title`, `alert-description`, and `alert-action` accept `as` and any HTML attributes.

## Related

- [Button](/components/button)
- [Badge](/components/badge)
- [Card](/components/card)


---

Source: https://slate.electrik.dev/components/separator.md

---
title: "Separator"
description: "Visually or semantically separates content."
sidebar_order: 5
sidebar_section: "Layout"
---

# Separator

Visually or semantically separates content.

## Usage

<x-code-preview>
@verbatim
<div>
    <div class="space-y-1">
        <h4 class="text-sm font-medium leading-none">Slate UI</h4>
        <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
    </div>
    <x-slate::separator class="my-4" />
    <div class="flex h-5 items-center gap-4 text-sm">
        <div>Blog</div>
        <x-slate::separator orientation="vertical" />
        <div>Docs</div>
        <x-slate::separator orientation="vertical" />
        <div>Source</div>
    </div>
</div>
@endverbatim
</x-code-preview>

## Horizontal

<x-code-preview>
@verbatim
<div class="w-full max-w-sm space-y-4">
    <div class="space-y-1">
        <p class="text-sm font-medium">Account</p>
        <p class="text-sm text-muted-foreground">Manage your profile and preferences.</p>
    </div>
    <x-slate::separator />
    <div class="space-y-1">
        <p class="text-sm font-medium">Billing</p>
        <p class="text-sm text-muted-foreground">Invoices, plans, and payment methods.</p>
    </div>
</div>
@endverbatim
</x-code-preview>

## Vertical

Vertical separators need a definite height from the parent.

<x-code-preview>
@verbatim
<div class="flex h-5 items-center gap-4 text-sm">
    <span>Blog</span>
    <x-slate::separator orientation="vertical" />
    <span>Docs</span>
    <x-slate::separator orientation="vertical" />
    <span>Source</span>
</div>
@endverbatim
</x-code-preview>

## Semantic separator

Set `decorative="false"` when the divider conveys structure to assistive tech.

<x-code-preview>
@verbatim
<div class="w-full max-w-sm space-y-4">
    <p class="text-sm">Section one</p>
    <x-slate::separator :decorative="false" />
    <p class="text-sm">Section two</p>
</div>
@endverbatim
</x-code-preview>

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `orientation` | `horizontal` \| `vertical` | `horizontal` | Divider axis |
| `decorative` | `bool` | `true` | When `true`, hidden from the accessibility tree |
| `as` | `string` | `div` | Root HTML element |

## Related

- [Card](/components/card)
- [Alert](/components/alert)
- [Field](/components/field)


---

Source: https://slate.electrik.dev/components/avatar.md

---
title: "Avatar"
description: "An image element with a fallback for representing a user."
sidebar_order: 6
sidebar_section: "Data display"
---

# Avatar

An image element with a fallback for representing a user.

## Usage

<x-code-preview>
@verbatim
<x-slate::avatar
    src="https://i.pravatar.cc/128?u=slate"
    alt="Alex Rivera"
    fallback="AR"
/>
@endverbatim
</x-code-preview>

## Composition

```
Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge (optional status dot or icon)
```

Prefer the prop API for typical avatars. Compose manually when you need custom markup:

<x-code-preview>
@verbatim
<x-slate::avatar>
    <x-slate::avatar-fallback>AR</x-slate::avatar-fallback>
    <x-slate::avatar-image src="https://i.pravatar.cc/128?u=slate" alt="Alex Rivera" />
</x-slate::avatar>
@endverbatim
</x-code-preview>

## Status dot

Use `dot` for an online-style indicator, or compose `avatar-badge` yourself.

<x-code-preview>
@verbatim
<div class="flex items-center gap-4">
    <x-slate::avatar fallback="AR" size="lg" dot />
    <x-slate::avatar fallback="JD" size="lg" dot="warning" />
    <x-slate::avatar size="lg" fallback="CN" dot="success" />
</div>
@endverbatim
</x-code-preview>

## Badge with icon

<x-code-preview>
@verbatim
<x-slate::avatar size="lg" fallback="PP">
    <x-slate::avatar-badge>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
            <path d="M12 5v14" stroke-linecap="round" />
            <path d="M5 12h14" stroke-linecap="round" />
        </svg>
    </x-slate::avatar-badge>
</x-slate::avatar>
@endverbatim
</x-code-preview>

## Sizes

<x-code-preview>
@verbatim
<div class="flex items-center gap-4">
    <x-slate::avatar size="sm" fallback="SM" />
    <x-slate::avatar fallback="DF" />
    <x-slate::avatar size="lg" fallback="LG" />
</div>
@endverbatim
</x-code-preview>

## Group

<x-code-preview>
@verbatim
<x-slate::avatar-group>
    <x-slate::avatar fallback="A" />
    <x-slate::avatar fallback="B" />
    <x-slate::avatar fallback="C" />
    <x-slate::avatar-group-count>+3</x-slate::avatar-group-count>
</x-slate::avatar-group>
@endverbatim
</x-code-preview>

## API Reference

### Avatar

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `default` \| `sm` \| `lg` | `default` | Avatar diameter |
| `src` | `string` | — | Image URL (composes `avatar-image`) |
| `alt` | `string` | `""` | Image alt text |
| `fallback` | `string` | — | Fallback initials when image is missing/broken |
| `dot` | `bool` \| `success` \| `warning` \| `destructive` \| `info` \| `primary` \| `muted` | — | Status indicator at the end-bottom corner (`true` = success) |
| `as` | `string` | `span` | Root HTML element |

### Parts

`avatar-image`, `avatar-fallback`, `avatar-badge`, `avatar-group`, and `avatar-group-count` accept `as` and HTML attributes.

## Related

- [Badge](/components/badge)
- [Skeleton](/components/skeleton)


---

Source: https://slate.electrik.dev/components/skeleton.md

---
title: "Skeleton"
description: "Use to show a placeholder while content is loading."
sidebar_order: 7
sidebar_section: "Feedback"
---

# Skeleton

Use to show a placeholder while content is loading.

## Usage

<x-code-preview>
@verbatim
<div class="flex items-center gap-4">
    <x-slate::skeleton class="size-10 rounded-full" />
    <div class="space-y-2">
        <x-slate::skeleton class="h-4 w-[250px]" />
        <x-slate::skeleton class="h-4 w-[200px]" />
    </div>
</div>
@endverbatim
</x-code-preview>

## Card placeholder

<x-code-preview>
@verbatim
<div class="flex flex-col gap-3 w-full max-w-sm">
    <x-slate::skeleton class="h-[125px] w-full rounded-xl" />
    <div class="space-y-2">
        <x-slate::skeleton class="h-4 w-full" />
        <x-slate::skeleton class="h-4 w-4/5" />
    </div>
</div>
@endverbatim
</x-code-preview>

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `as` | `string` | `div` | Root HTML element |

Size and shape come from `class` (for example `size-10 rounded-full` or `h-4 w-full`).

## Related

- [Avatar](/components/avatar)
- [Card](/components/card)
- [Alert](/components/alert)


---

Source: https://slate.electrik.dev/components/dialog.md

---
title: "Dialog"
description: "A modal dialog that interrupts the user with important content."
sidebar_order: 8
sidebar_section: "Overlays"
---

# Dialog

A modal dialog that interrupts the user with important content and expects a response. Requires Alpine.js.

## Usage

<x-code-preview>
@verbatim
<x-slate::dialog>
    <x-slate::dialog-trigger>
        <x-slate::button variant="outline">Edit profile</x-slate::button>
    </x-slate::dialog-trigger>
    <x-slate::dialog-content
        title="Edit profile"
        description="Make changes to your profile here. Click save when you're done."
    >
        <div class="grid gap-3 py-2">
            <x-slate::field>
                <x-slate::field-label for="dialog-name">Name</x-slate::field-label>
                <x-slate::input id="dialog-name" value="Pedro Duarte" />
            </x-slate::field>
            <x-slate::field>
                <x-slate::field-label for="dialog-username">Username</x-slate::field-label>
                <x-slate::input id="dialog-username" value="@peduarte" />
            </x-slate::field>
        </div>
        <x-slot:footer>
            <x-slate::dialog-close>
                <x-slate::button variant="outline">Cancel</x-slate::button>
            </x-slate::dialog-close>
            <x-slate::button>Save changes</x-slate::button>
        </x-slot:footer>
    </x-slate::dialog-content>
</x-slate::dialog>
@endverbatim
</x-code-preview>

## Composition

```
Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    ├── …body…
    └── DialogFooter
```

Prefer `title` / `description` / `footer` on `dialog-content` for typical forms. Compose the parts manually for custom layouts.

## Custom composition

<x-code-preview>
@verbatim
<x-slate::dialog>
    <x-slate::dialog-trigger>
        <x-slate::button>Share</x-slate::button>
    </x-slate::dialog-trigger>
    <x-slate::dialog-content>
        <x-slate::dialog-header>
            <x-slate::dialog-title>Share link</x-slate::dialog-title>
            <x-slate::dialog-description>
                Anyone with the link can view this document.
            </x-slate::dialog-description>
        </x-slate::dialog-header>
        <x-slate::input value="https://slate.electrik.dev" readonly />
        <x-slate::dialog-footer>
            <x-slate::dialog-close>
                <x-slate::button variant="outline">Close</x-slate::button>
            </x-slate::dialog-close>
            <x-slate::button>Copy</x-slate::button>
        </x-slate::dialog-footer>
    </x-slate::dialog-content>
</x-slate::dialog>
@endverbatim
</x-code-preview>

## Without close button

<x-code-preview>
@verbatim
<x-slate::dialog>
    <x-slate::dialog-trigger>
        <x-slate::button variant="outline">Confirm</x-slate::button>
    </x-slate::dialog-trigger>
    <x-slate::dialog-content
        :show-close-button="false"
        title="Are you sure?"
        description="This action cannot be undone."
    >
        <x-slot:footer>
            <x-slate::dialog-close>
                <x-slate::button variant="outline">Cancel</x-slate::button>
            </x-slate::dialog-close>
            <x-slate::button variant="destructive">Continue</x-slate::button>
        </x-slot:footer>
    </x-slate::dialog-content>
</x-slate::dialog>
@endverbatim
</x-code-preview>

## API Reference

### Dialog

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open` | `bool` | `false` | Initial open state |
| `as` | `string` | `div` | Root HTML element |

### DialogContent

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `showCloseButton` | `bool` | `true` | Corner close control |
| `title` | `string` | — | Compose `dialog-title` |
| `description` | `string` | — | Compose `dialog-description` |

Named slot: `footer` → wraps content in `dialog-footer`.

### Parts

`dialog-trigger`, `dialog-close`, `dialog-header`, `dialog-footer`, `dialog-title`, and `dialog-description`.

## Notes

- Escape closes the dialog; clicking the overlay also closes it
- `dialog-content` teleports to `body` so stacking context stays correct
- Consumers need Alpine.js (Livewire includes it)

## Related

- [Button](/components/button)
- [Alert](/components/alert)
- [Field](/components/field)


---

Source: https://slate.electrik.dev/components/tabs.md

---
title: "Tabs"
description: "A set of layered sections of content displayed one at a time."
sidebar_order: 9
sidebar_section: "Navigation"
---

# Tabs

A set of layered sections of content — only one panel is visible at a time. Requires Alpine.js.

## Usage

<x-code-preview>
@verbatim
<x-slate::tabs default-value="account" class="w-full max-w-md">
    <x-slate::tabs-list>
        <x-slate::tabs-trigger value="account">Account</x-slate::tabs-trigger>
        <x-slate::tabs-trigger value="password">Password</x-slate::tabs-trigger>
    </x-slate::tabs-list>
    <x-slate::tabs-content value="account" class="space-y-3 pt-3">
        <p class="text-sm text-muted-foreground">Make changes to your account here.</p>
        <x-slate::input placeholder="Name" />
    </x-slate::tabs-content>
    <x-slate::tabs-content value="password" class="space-y-3 pt-3">
        <p class="text-sm text-muted-foreground">Change your password here.</p>
        <x-slate::input type="password" placeholder="New password" />
    </x-slate::tabs-content>
</x-slate::tabs>
@endverbatim
</x-code-preview>

## Composition

```
Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent
```

## Line variant

<x-code-preview>
@verbatim
<x-slate::tabs default-value="overview" class="w-full max-w-md">
    <x-slate::tabs-list variant="line">
        <x-slate::tabs-trigger value="overview">Overview</x-slate::tabs-trigger>
        <x-slate::tabs-trigger value="analytics">Analytics</x-slate::tabs-trigger>
        <x-slate::tabs-trigger value="reports">Reports</x-slate::tabs-trigger>
    </x-slate::tabs-list>
    <x-slate::tabs-content value="overview" class="pt-4 text-sm text-muted-foreground">
        Project overview and recent activity.
    </x-slate::tabs-content>
    <x-slate::tabs-content value="analytics" class="pt-4 text-sm text-muted-foreground">
        Traffic and conversion metrics.
    </x-slate::tabs-content>
    <x-slate::tabs-content value="reports" class="pt-4 text-sm text-muted-foreground">
        Downloadable weekly reports.
    </x-slate::tabs-content>
</x-slate::tabs>
@endverbatim
</x-code-preview>

## Vertical

<x-code-preview>
@verbatim
<x-slate::tabs default-value="general" orientation="vertical" class="w-full max-w-lg">
    <x-slate::tabs-list>
        <x-slate::tabs-trigger value="general">General</x-slate::tabs-trigger>
        <x-slate::tabs-trigger value="security">Security</x-slate::tabs-trigger>
        <x-slate::tabs-trigger value="billing">Billing</x-slate::tabs-trigger>
    </x-slate::tabs-list>
    <x-slate::tabs-content value="general" class="rounded-lg border p-4 text-sm">
        Workspace name, timezone, and locale.
    </x-slate::tabs-content>
    <x-slate::tabs-content value="security" class="rounded-lg border p-4 text-sm">
        Password, sessions, and 2FA settings.
    </x-slate::tabs-content>
    <x-slate::tabs-content value="billing" class="rounded-lg border p-4 text-sm">
        Plan, invoices, and payment methods.
    </x-slate::tabs-content>
</x-slate::tabs>
@endverbatim
</x-code-preview>

## API Reference

### Tabs

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `defaultValue` | `string` | — | Initially selected tab value |
| `value` | `string` | — | Alias for initial value |
| `orientation` | `horizontal` \| `vertical` | `horizontal` | Layout axis |
| `as` | `string` | `div` | Root HTML element |

### TabsList

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `default` \| `line` | `default` | Visual style |

### TabsTrigger / TabsContent

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | — | Tab identity (must match between trigger and content) |

## Notes

- Consumers need Alpine.js (Livewire includes it)
- Active state is tracked with Alpine `active` on the root

## Related

- [Button](/components/button)
- [Card](/components/card)
- [Separator](/components/separator)


---

Source: https://slate.electrik.dev/components/spinner.md

---
title: "Spinner"
description: "A spinning indicator for loading states."
sidebar_order: 10
sidebar_section: "Feedback"
---

# Spinner

A spinning indicator for loading states.

## Usage

<x-code-preview>
@verbatim
<x-slate::spinner />
@endverbatim
</x-code-preview>

## Sizes

Size with utility classes.

<x-code-preview>
@verbatim
<div class="flex items-center gap-4">
    <x-slate::spinner class="size-3" />
    <x-slate::spinner />
    <x-slate::spinner class="size-6" />
    <x-slate::spinner class="size-8" />
</div>
@endverbatim
</x-code-preview>

## With button

<x-code-preview>
@verbatim
<div class="flex flex-wrap gap-3">
    <x-slate::button disabled>
        <x-slate::spinner />
        Please wait
    </x-slate::button>
    <x-slate::button variant="outline" disabled>
        <x-slate::spinner />
        Loading
    </x-slate::button>
    <x-slate::button variant="secondary" size="icon" disabled aria-label="Loading">
        <x-slate::spinner />
    </x-slate::button>
</div>
@endverbatim
</x-code-preview>

## Colors

Inherits `currentColor` from the parent.

<x-code-preview>
@verbatim
<div class="flex items-center gap-4">
    <x-slate::spinner class="text-primary" />
    <x-slate::spinner class="text-destructive" />
    <x-slate::spinner class="text-muted-foreground" />
</div>
@endverbatim
</x-code-preview>

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | `"Loading"` | Accessible name via `aria-label` |

## Related

- [Button](/components/button)
- [Skeleton](/components/skeleton)
- [Badge](/components/badge)


---

Source: https://slate.electrik.dev/components/breadcrumb.md

---
title: "Breadcrumb"
description: "Displays the path to the current resource using a hierarchy of links."
sidebar_order: 11
sidebar_section: "Navigation"
---

# Breadcrumb

Displays the path to the current resource using a hierarchy of links.

## Usage

<x-code-preview>
@verbatim
<x-slate::breadcrumb>
    <x-slate::breadcrumb-list>
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-link href="#">Home</x-slate::breadcrumb-link>
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator />
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-link href="#">Components</x-slate::breadcrumb-link>
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator />
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-page>Breadcrumb</x-slate::breadcrumb-page>
        </x-slate::breadcrumb-item>
    </x-slate::breadcrumb-list>
</x-slate::breadcrumb>
@endverbatim
</x-code-preview>

## Composition

```
Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage
```

## With ellipsis

<x-code-preview>
@verbatim
<x-slate::breadcrumb>
    <x-slate::breadcrumb-list>
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-link href="#">Home</x-slate::breadcrumb-link>
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator />
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-ellipsis />
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator />
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-link href="#">Components</x-slate::breadcrumb-link>
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator />
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-page>Breadcrumb</x-slate::breadcrumb-page>
        </x-slate::breadcrumb-item>
    </x-slate::breadcrumb-list>
</x-slate::breadcrumb>
@endverbatim
</x-code-preview>

## Custom separator

Pass children to `breadcrumb-separator` to replace the default chevron.

<x-code-preview>
@verbatim
<x-slate::breadcrumb>
    <x-slate::breadcrumb-list>
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-link href="#">Home</x-slate::breadcrumb-link>
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator>/</x-slate::breadcrumb-separator>
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-page>Docs</x-slate::breadcrumb-page>
        </x-slate::breadcrumb-item>
    </x-slate::breadcrumb-list>
</x-slate::breadcrumb>
@endverbatim
</x-code-preview>

## API Reference

### Parts

| Component | Element | Notes |
|-----------|---------|-------|
| `breadcrumb` | `nav` | Sets `aria-label="breadcrumb"` |
| `breadcrumb-list` | `ol` | Flex row of items |
| `breadcrumb-item` | `li` | Single crumb |
| `breadcrumb-link` | `a` | Navigable crumb (`as` for buttons/custom) |
| `breadcrumb-page` | `span` | Current page (`aria-current="page"`) |
| `breadcrumb-separator` | `li` | Default chevron flips in RTL |
| `breadcrumb-ellipsis` | `span` | Collapsed middle segments |

## Related

- [Tabs](/components/tabs)
- [Separator](/components/separator)
- [Button](/components/button)


---

Source: https://slate.electrik.dev/components/progress.md

---
title: "Progress"
description: "Displays an indicator showing the completion progress of a task."
sidebar_order: 12
sidebar_section: "Feedback"
---

# Progress

Displays an indicator showing the completion progress of a task.

## Usage

<x-code-preview>
@verbatim
<x-slate::progress :value="33" class="w-full max-w-md" />
@endverbatim
</x-code-preview>

## Values

<x-code-preview>
@verbatim
<div class="grid w-full max-w-md gap-4">
    <x-slate::progress :value="10" />
    <x-slate::progress :value="45" />
    <x-slate::progress :value="80" />
    <x-slate::progress :value="100" />
</div>
@endverbatim
</x-code-preview>

## Custom max

<x-code-preview>
@verbatim
<div class="w-full max-w-md space-y-2">
    <div class="flex justify-between text-sm text-muted-foreground">
        <span>Uploading</span>
        <span>40 / 80 MB</span>
    </div>
    <x-slate::progress :value="40" :max="80" />
</div>
@endverbatim
</x-code-preview>

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `number` | `0` | Current progress value |
| `max` | `number` | `100` | Maximum value |
| `as` | `string` | `div` | Root HTML element |

Width is filled from the inline start edge, so it tracks correctly in RTL.

## Related

- [Spinner](/components/spinner)
- [Skeleton](/components/skeleton)
- [Alert](/components/alert)


---

Source: https://slate.electrik.dev/components/kbd.md

---
title: "Kbd"
description: "Displays a keyboard key or shortcut."
sidebar_order: 13
---

# Kbd

Displays a keyboard key or shortcut.

## Usage

<x-code-preview>
@verbatim
<div class="flex items-center gap-2 text-sm text-muted-foreground">
    Press
    <x-slate::kbd>⌘</x-slate::kbd>
    <span>+</span>
    <x-slate::kbd>K</x-slate::kbd>
    to search
</div>
@endverbatim
</x-code-preview>

## Group

<x-code-preview>
@verbatim
<x-slate::kbd-group>
    <x-slate::kbd>⌘</x-slate::kbd>
    <x-slate::kbd>⇧</x-slate::kbd>
    <x-slate::kbd>P</x-slate::kbd>
</x-slate::kbd-group>
@endverbatim
</x-code-preview>

## API Reference

| Component | Element | Notes |
|-----------|---------|-------|
| `kbd` | `kbd` | Single key |
| `kbd-group` | `kbd` | Groups related keys |

## Related

- [Tooltip](/components/tooltip)
- [Button](/components/button)


---

Source: https://slate.electrik.dev/components/aspect-ratio.md

---
title: "Aspect Ratio"
description: "Displays content within a desired ratio."
sidebar_order: 14
---

# Aspect Ratio

Displays content within a desired ratio.

## Usage

<x-code-preview>
@verbatim
<x-slate::aspect-ratio ratio="16:9" class="overflow-hidden rounded-lg bg-muted">
    <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        class="absolute inset-0 size-full object-cover"
    />
</x-slate::aspect-ratio>
@endverbatim
</x-code-preview>

## Ratios

<x-code-preview>
@verbatim
<div class="grid gap-4 sm:grid-cols-3">
    <div class="space-y-2">
        <p class="text-sm text-muted-foreground">1:1</p>
        <x-slate::aspect-ratio ratio="1:1" class="rounded-md bg-muted" />
    </div>
    <div class="space-y-2">
        <p class="text-sm text-muted-foreground">4:3</p>
        <x-slate::aspect-ratio ratio="4:3" class="rounded-md bg-muted" />
    </div>
    <div class="space-y-2">
        <p class="text-sm text-muted-foreground">21:9</p>
        <x-slate::aspect-ratio ratio="21:9" class="rounded-md bg-muted" />
    </div>
</div>
@endverbatim
</x-code-preview>

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `ratio` | `string` | `16 / 9` | CSS aspect-ratio value or preset (`1:1`, `16:9`, `4:3`, `3:2`, `21:9`, `square`, `video`) |
| `as` | `string` | `div` | Root HTML element |

## Related

- [Card](/components/card)
- [Avatar](/components/avatar)


---

Source: https://slate.electrik.dev/components/tooltip.md

---
title: "Tooltip"
description: "A popup that displays information related to an element when hovered or focused."
sidebar_order: 15
---

# Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. Requires Alpine.js.

## Usage

<x-code-preview>
@verbatim
<x-slate::tooltip label="Add to library">
    <x-slate::button variant="outline" size="icon" aria-label="Add">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M5 12h14" stroke-linecap="round" />
            <path d="M12 5v14" stroke-linecap="round" />
        </svg>
    </x-slate::button>
</x-slate::tooltip>
@endverbatim
</x-code-preview>

## Sides

Use logical sides: `top`, `bottom`, `start`, `end`.

<x-code-preview preview-min-height="200px">
@verbatim
<div class="flex flex-wrap items-center justify-center gap-6">
    <x-slate::tooltip label="Top" side="top">
        <x-slate::button variant="outline" size="sm">Top</x-slate::button>
    </x-slate::tooltip>
    <x-slate::tooltip label="End" side="end">
        <x-slate::button variant="outline" size="sm">End</x-slate::button>
    </x-slate::tooltip>
    <x-slate::tooltip label="Bottom" side="bottom">
        <x-slate::button variant="outline" size="sm">Bottom</x-slate::button>
    </x-slate::tooltip>
    <x-slate::tooltip label="Start" side="start">
        <x-slate::button variant="outline" size="sm">Start</x-slate::button>
    </x-slate::tooltip>
</div>
@endverbatim
</x-code-preview>

## With content slot

<x-code-preview>
@verbatim
<x-slate::tooltip side="bottom">
    <x-slot:content>
        <span class="inline-flex items-center gap-1.5">
            Press <x-slate::kbd>⌘</x-slate::kbd> <x-slate::kbd>K</x-slate::kbd>
        </span>
    </x-slot:content>
    <x-slate::button variant="secondary">Shortcuts</x-slate::button>
</x-slate::tooltip>
@endverbatim
</x-code-preview>

## Composition

```
Tooltip
├── TooltipTrigger
└── TooltipContent
```

<x-code-preview>
@verbatim
<x-slate::tooltip>
    <x-slate::tooltip-trigger>
        <x-slate::button variant="outline">Hover</x-slate::button>
    </x-slate::tooltip-trigger>
    <x-slate::tooltip-content side="top">
        Composed tooltip
    </x-slate::tooltip-content>
</x-slate::tooltip>
@endverbatim
</x-code-preview>

## API Reference

### Tooltip

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | — | Progressive tooltip text |
| `side` | `top` \| `bottom` \| `start` \| `end` | `top` | Preferred side |
| `open` | `bool` | `false` | Initial open state |

Named slot: `content` for rich tooltip markup.

## Related

- [Button](/components/button)
- [Kbd](/components/kbd)
- [Dialog](/components/dialog)


---

Source: https://slate.electrik.dev/components/collapsible.md

---
title: "Collapsible"
description: "An interactive component which expands/collapses a panel."
sidebar_order: 16
---

# Collapsible

An interactive component which expands/collapses a panel. Requires Alpine.js.

## Usage

<x-code-preview>
@verbatim
<x-slate::collapsible class="w-full max-w-sm space-y-2">
    <div class="flex items-center justify-between gap-4 rounded-lg border px-4 py-3">
        <h4 class="text-sm font-medium">3 starred repositories</h4>
        <x-slate::collapsible-trigger class="inline-flex size-8 items-center justify-center rounded-md hover:bg-muted">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
                <path d="m6 9 6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <span class="sr-only">Toggle</span>
        </x-slate::collapsible-trigger>
    </div>
    <x-slate::collapsible-content class="space-y-2">
        <div class="rounded-lg border px-4 py-2 text-sm">electrik/slate</div>
        <div class="rounded-lg border px-4 py-2 text-sm">electrik/core</div>
        <div class="rounded-lg border px-4 py-2 text-sm">laravel/framework</div>
    </x-slate::collapsible-content>
</x-slate::collapsible>
@endverbatim
</x-code-preview>

## Composition

```
Collapsible
├── CollapsibleTrigger
└── CollapsibleContent
```

## Open by default

<x-code-preview>
@verbatim
<x-slate::collapsible :open="true" class="w-full max-w-sm space-y-2">
    <x-slate::collapsible-trigger class="flex w-full items-center justify-between rounded-lg border px-4 py-3 text-sm font-medium">
        Can I use this in my project?
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="m6 9 6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </x-slate::collapsible-trigger>
    <x-slate::collapsible-content class="rounded-lg border px-4 py-3 text-sm text-muted-foreground">
        Yes. Free for personal and commercial projects.
    </x-slate::collapsible-content>
</x-slate::collapsible>
@endverbatim
</x-code-preview>

## API Reference

### Collapsible

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open` | `bool` | `false` | Initial open state |
| `as` | `string` | `div` | Root HTML element |

### Parts

`collapsible-trigger` toggles state; `collapsible-content` shows when open.

## Related

- [Dialog](/components/dialog)
- [Tabs](/components/tabs)
- [Card](/components/card)


---

Source: https://slate.electrik.dev/components/accordion.md

---
title: "Accordion"
description: "A vertically stacked set of interactive headings that each reveal a section of content."
sidebar_order: 17
---

# Accordion

A vertically stacked set of interactive headings that each reveal a section of content. Requires Alpine.js.

## Usage

<x-code-preview preview-height="420px" preview-align="start">
@verbatim
<x-slate::accordion type="single" default-value="item-1" class="max-w-lg">
    <x-slate::accordion-item value="item-1">
        <x-slate::accordion-trigger>Is it accessible?</x-slate::accordion-trigger>
        <x-slate::accordion-content>
            Yes. It uses ARIA attributes and keyboard-friendly controls.
        </x-slate::accordion-content>
    </x-slate::accordion-item>
    <x-slate::accordion-item value="item-2">
        <x-slate::accordion-trigger>Is it styled?</x-slate::accordion-trigger>
        <x-slate::accordion-content>
            Yes. It comes with default styles that match the rest of Slate.
        </x-slate::accordion-content>
    </x-slate::accordion-item>
    <x-slate::accordion-item value="item-3">
        <x-slate::accordion-trigger>Is it animated?</x-slate::accordion-trigger>
        <x-slate::accordion-content>
            Yes. Open and close transitions are included.
        </x-slate::accordion-content>
    </x-slate::accordion-item>
</x-slate::accordion>
@endverbatim
</x-code-preview>

## Multiple

Allow more than one item open at once.

<x-code-preview preview-height="360px" preview-align="start">
@verbatim
<x-slate::accordion type="multiple" default-value="a,b" class="max-w-lg">
    <x-slate::accordion-item value="a">
        <x-slate::accordion-trigger>Can I open several items?</x-slate::accordion-trigger>
        <x-slate::accordion-content>Yes, with <code>type="multiple"</code>.</x-slate::accordion-content>
    </x-slate::accordion-item>
    <x-slate::accordion-item value="b">
        <x-slate::accordion-trigger>Does collapsible still apply?</x-slate::accordion-trigger>
        <x-slate::accordion-content>For multiple, each item toggles independently.</x-slate::accordion-content>
    </x-slate::accordion-item>
</x-slate::accordion>
@endverbatim
</x-code-preview>

## Composition

```
Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent
```

## API Reference

### Accordion

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | `single` \| `multiple` | `single` | One open item, or many |
| `default-value` | `string` | — | Initial open value(s); comma-separated for `multiple` |
| `collapsible` | `bool` | `true` | Allow closing the open item when `type="single"` |

## Related

- [Collapsible](/components/collapsible)
- [Tabs](/components/tabs)


---

Source: https://slate.electrik.dev/components/popover.md

---
title: "Popover"
description: "Displays rich content in a portal-like panel anchored to a trigger."
sidebar_order: 18
---

# Popover

Displays rich content in a panel anchored to a trigger. Click to open, click outside or Escape to close. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="240px">
@verbatim
<x-slate::popover>
    <x-slot:content>
        <div class="grid gap-2">
            <p class="text-sm font-medium">Dimensions</p>
            <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
            <div class="grid gap-2">
                <x-slate::input label="Width" value="100%" />
                <x-slate::input label="Height" value="25px" />
            </div>
        </div>
    </x-slot:content>
    <x-slate::button variant="outline">Open popover</x-slate::button>
</x-slate::popover>
@endverbatim
</x-code-preview>

## Composition

```
Popover
├── PopoverTrigger
└── PopoverContent
```

<x-code-preview>
@verbatim
<x-slate::popover>
    <x-slate::popover-trigger>
        <x-slate::button variant="secondary">Compose</x-slate::button>
    </x-slate::popover-trigger>
    <x-slate::popover-content side="bottom" align="start">
        <p class="text-sm">Place any controls or copy here.</p>
    </x-slate::popover-content>
</x-slate::popover>
@endverbatim
</x-code-preview>

## API Reference

### Popover

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open` | `bool` | `false` | Initial open state |

Named slot: `content` for the progressive panel.

### PopoverContent

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `side` | `top` \| `bottom` \| `start` \| `end` | `bottom` | Preferred side |
| `align` | `start` \| `center` \| `end` | `center` | Alignment along the side |

## Related

- [Tooltip](/components/tooltip)
- [Dialog](/components/dialog)
- [Button](/components/button)


---

Source: https://slate.electrik.dev/components/toggle.md

---
title: "Toggle"
description: "A two-state button that can be either on or off."
sidebar_order: 19
---

# Toggle

A two-state button that can be either on or off. Requires Alpine.js.

## Usage

<x-code-preview>
@verbatim
<x-slate::toggle aria-label="Toggle italic">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
        <path d="M19 4h-9M14 20H5M15 4 9 20" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
</x-slate::toggle>
@endverbatim
</x-code-preview>

## Outline

<x-code-preview>
@verbatim
<div class="flex items-center gap-2">
    <x-slate::toggle variant="outline" aria-label="Toggle bold">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </x-slate::toggle>
    <x-slate::toggle variant="outline" pressed aria-label="Toggle italic">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M19 4h-9M14 20H5M15 4 9 20" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </x-slate::toggle>
    <x-slate::toggle variant="outline" aria-label="Toggle underline">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M6 4v6a6 6 0 0 0 12 0V4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M4 20h16" stroke-linecap="round" />
        </svg>
    </x-slate::toggle>
</div>
@endverbatim
</x-code-preview>

## With text

<x-code-preview>
@verbatim
<x-slate::toggle variant="outline">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
        <path d="M19 4h-9M14 20H5M15 4 9 20" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    Italic
</x-slate::toggle>
@endverbatim
</x-code-preview>

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `pressed` | `bool` | `false` | Initial pressed state |
| `variant` | `default` \| `outline` | `default` | Visual style |
| `size` | `default` \| `sm` \| `lg` | `default` | Control size |

## Related

- [Button](/components/button)
- [Switch](/components/switch)
- [Badge](/components/badge)


---

Source: https://slate.electrik.dev/components/toggle-group.md

---
title: "Toggle Group"
description: "A set of two-state buttons that can be toggled on or off."
sidebar_order: 21
---

# Toggle Group

A set of two-state buttons that can be toggled on or off. Requires Alpine.js.

## Usage

<x-code-preview>
@verbatim
<x-slate::toggle-group type="single" default-value="center" variant="outline">
    <x-slate::toggle-group-item value="start" aria-label="Align start">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M21 6H3M15 12H3M17 18H3" stroke-linecap="round" />
        </svg>
    </x-slate::toggle-group-item>
    <x-slate::toggle-group-item value="center" aria-label="Align center">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M21 6H3M17 12H7M19 18H5" stroke-linecap="round" />
        </svg>
    </x-slate::toggle-group-item>
    <x-slate::toggle-group-item value="end" aria-label="Align end">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M21 6H3M21 12H9M21 18H7" stroke-linecap="round" />
        </svg>
    </x-slate::toggle-group-item>
</x-slate::toggle-group>
@endverbatim
</x-code-preview>

## Multiple

<x-code-preview>
@verbatim
<x-slate::toggle-group type="multiple" default-value="bold" variant="outline">
    <x-slate::toggle-group-item value="bold" aria-label="Toggle bold">B</x-slate::toggle-group-item>
    <x-slate::toggle-group-item value="italic" aria-label="Toggle italic">I</x-slate::toggle-group-item>
    <x-slate::toggle-group-item value="underline" aria-label="Toggle underline">U</x-slate::toggle-group-item>
</x-slate::toggle-group>
@endverbatim
</x-code-preview>

## Composition

```
ToggleGroup
└── ToggleGroupItem
```

## API Reference

### ToggleGroup

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | `single` \| `multiple` | `single` | Selection mode |
| `variant` | `default` \| `outline` | `default` | Visual style for items |
| `size` | `default` \| `sm` \| `lg` | `default` | Control size |
| `default-value` | `string` | — | Initial value(s); comma-separated for `multiple` |

## Related

- [Toggle](/components/toggle)
- [Button](/components/button)


---

Source: https://slate.electrik.dev/components/empty.md

---
title: "Empty"
description: "Use to display an empty state when there is no content."
sidebar_order: 20
---

# Empty

Use to display an empty state when a list, table, or page has no content yet.

## Usage

<x-code-preview>
@verbatim
<x-slate::empty
    title="No projects yet"
    description="You have not created any projects. Get started by creating your first one."
>
    <x-slot:media>
        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </x-slot:media>
    <x-slot:actions>
        <x-slate::button>Create project</x-slate::button>
        <x-slate::button variant="outline">Import</x-slate::button>
    </x-slot:actions>
</x-slate::empty>
@endverbatim
</x-code-preview>

## Composition

```
Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent
```

<x-code-preview>
@verbatim
<x-slate::empty>
    <x-slate::empty-header>
        <x-slate::empty-media variant="icon">
            <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <circle cx="11" cy="11" r="8" />
                <path d="m21 21-4.3-4.3" stroke-linecap="round" />
            </svg>
        </x-slate::empty-media>
        <x-slate::empty-title>No results</x-slate::empty-title>
        <x-slate::empty-description>
            Try a different search or clear filters.
        </x-slate::empty-description>
    </x-slate::empty-header>
    <x-slate::empty-content>
        <x-slate::button variant="outline">Clear filters</x-slate::button>
    </x-slate::empty-content>
</x-slate::empty>
@endverbatim
</x-code-preview>

## API Reference

### Empty

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | — | Progressive title |
| `description` | `string` | — | Progressive description |

Named slots: `media`, `actions`.

### EmptyMedia

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `icon` \| `default` | `icon` | Icon chip vs plain media |

## Related

- [Card](/components/card)
- [Button](/components/button)
- [Skeleton](/components/skeleton)


---

Source: https://slate.electrik.dev/components/slider.md

---
title: "Slider"
description: "An input where the user selects a value from within a given range."
sidebar_order: 22
---

# Slider

An input where the user selects a value from within a given range. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="100px">
@verbatim
<x-slate::slider :value="33" class="w-full max-w-sm" />
@endverbatim
</x-code-preview>

## Range bounds

<x-code-preview preview-min-height="100px">
@verbatim
<div class="w-full max-w-sm space-y-4">
    <x-slate::slider :value="25" :min="0" :max="50" :step="5" />
    <x-slate::slider :value="80" />
</div>
@endverbatim
</x-code-preview>

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `number` | `50` | Initial value |
| `min` | `number` | `0` | Minimum |
| `max` | `number` | `100` | Maximum |
| `step` | `number` | `1` | Step increment |
| `name` | `string` | — | Native input name |
| `disabled` | `bool` | `false` | Disable interaction |

## Related

- [Progress](/components/progress)
- [Input](/components/input)
- [Field](/components/field)


---

Source: https://slate.electrik.dev/components/pagination.md

---
title: "Pagination"
description: "Pagination with page navigation, next and previous links."
sidebar_order: 23
---

# Pagination

Pagination with page navigation, next and previous links.

## Usage

<x-code-preview>
@verbatim
<x-slate::pagination>
    <x-slate::pagination-content>
        <x-slate::pagination-item>
            <x-slate::pagination-previous href="#" />
        </x-slate::pagination-item>
        <x-slate::pagination-item>
            <x-slate::pagination-link href="#">1</x-slate::pagination-link>
        </x-slate::pagination-item>
        <x-slate::pagination-item>
            <x-slate::pagination-link href="#" is-active>2</x-slate::pagination-link>
        </x-slate::pagination-item>
        <x-slate::pagination-item>
            <x-slate::pagination-link href="#">3</x-slate::pagination-link>
        </x-slate::pagination-item>
        <x-slate::pagination-item>
            <x-slate::pagination-ellipsis />
        </x-slate::pagination-item>
        <x-slate::pagination-item>
            <x-slate::pagination-next href="#" />
        </x-slate::pagination-item>
    </x-slate::pagination-content>
</x-slate::pagination>
@endverbatim
</x-code-preview>

## Composition

```
Pagination
└── PaginationContent
    └── PaginationItem
        ├── PaginationPrevious
        ├── PaginationLink
        ├── PaginationEllipsis
        └── PaginationNext
```

## API Reference

### PaginationLink

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `is-active` | `bool` | `false` | Marks the current page |
| `size` | `default` \| `icon` \| `sm` | `icon` | Control size |
| `href` | `string` | `#` | Link target |

## Related

- [Breadcrumb](/components/breadcrumb)
- [Button](/components/button)


---

Source: https://slate.electrik.dev/components/table.md

---
title: "Table"
description: "A responsive table component."
sidebar_order: 24
---

# Table

A responsive table with header, body, footer, and caption parts.

## Usage

<x-code-preview preview-align="start">
@verbatim
<x-slate::table>
    <x-slate::table-caption>A list of recent invoices.</x-slate::table-caption>
    <x-slate::table-header>
        <x-slate::table-row>
            <x-slate::table-head class="w-[100px]">Invoice</x-slate::table-head>
            <x-slate::table-head>Status</x-slate::table-head>
            <x-slate::table-head>Method</x-slate::table-head>
            <x-slate::table-head class="text-end">Amount</x-slate::table-head>
        </x-slate::table-row>
    </x-slate::table-header>
    <x-slate::table-body>
        <x-slate::table-row>
            <x-slate::table-cell class="font-medium">INV001</x-slate::table-cell>
            <x-slate::table-cell>Paid</x-slate::table-cell>
            <x-slate::table-cell>Credit card</x-slate::table-cell>
            <x-slate::table-cell class="text-end">$250.00</x-slate::table-cell>
        </x-slate::table-row>
        <x-slate::table-row>
            <x-slate::table-cell class="font-medium">INV002</x-slate::table-cell>
            <x-slate::table-cell>Pending</x-slate::table-cell>
            <x-slate::table-cell>PayPal</x-slate::table-cell>
            <x-slate::table-cell class="text-end">$150.00</x-slate::table-cell>
        </x-slate::table-row>
        <x-slate::table-row>
            <x-slate::table-cell class="font-medium">INV003</x-slate::table-cell>
            <x-slate::table-cell>Unpaid</x-slate::table-cell>
            <x-slate::table-cell>Bank transfer</x-slate::table-cell>
            <x-slate::table-cell class="text-end">$350.00</x-slate::table-cell>
        </x-slate::table-row>
    </x-slate::table-body>
    <x-slate::table-footer>
        <x-slate::table-row>
            <x-slate::table-cell colspan="3">Total</x-slate::table-cell>
            <x-slate::table-cell class="text-end">$750.00</x-slate::table-cell>
        </x-slate::table-row>
    </x-slate::table-footer>
</x-slate::table>
@endverbatim
</x-code-preview>

## Composition

```
Table
├── TableCaption
├── TableHeader
│   └── TableRow / TableHead
├── TableBody
│   └── TableRow / TableCell
└── TableFooter
    └── TableRow / TableCell
```

## Related

- [Card](/components/card)
- [Checkbox](/components/checkbox)
- [Empty](/components/empty)


---

Source: https://slate.electrik.dev/components/hover-card.md

---
title: "Hover Card"
description: "For sighted users to preview content available behind a link."
sidebar_order: 25
---

# Hover Card

For sighted users to preview content available behind a link. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="220px">
@verbatim
<x-slate::hover-card>
    <x-slot:content>
        <div class="flex gap-3">
            <x-slate::avatar fallback="EL" class="size-10" />
            <div class="space-y-1">
                <p class="text-sm font-medium">Electrik</p>
                <p class="text-sm text-muted-foreground">Laravel apps, without the boilerplate.</p>
            </div>
        </div>
    </x-slot:content>
    <x-slate::button variant="link">@electrik</x-slate::button>
</x-slate::hover-card>
@endverbatim
</x-code-preview>

## Composition

```
HoverCard
├── HoverCardTrigger
└── HoverCardContent
```

## Related

- [Tooltip](/components/tooltip)
- [Popover](/components/popover)
- [Avatar](/components/avatar)


---

Source: https://slate.electrik.dev/components/alert-dialog.md

---
title: "Alert Dialog"
description: "A modal dialog that interrupts the user with important content and expects a response."
sidebar_order: 26
---

# Alert Dialog

A modal dialog that interrupts the user with important content and expects a response. Requires Alpine.js.

## Usage

<x-code-preview>
@verbatim
<x-slate::alert-dialog>
    <x-slate::alert-dialog-trigger>
        <x-slate::button variant="outline">Show dialog</x-slate::button>
    </x-slate::alert-dialog-trigger>
    <x-slate::alert-dialog-content
        title="Are you absolutely sure?"
        description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
    >
        <x-slot:footer>
            <x-slate::alert-dialog-cancel>
                <x-slate::button variant="outline">Cancel</x-slate::button>
            </x-slate::alert-dialog-cancel>
            <x-slate::alert-dialog-action>
                <x-slate::button variant="destructive">Continue</x-slate::button>
            </x-slate::alert-dialog-action>
        </x-slot:footer>
    </x-slate::alert-dialog-content>
</x-slate::alert-dialog>
@endverbatim
</x-code-preview>

## Composition

```
AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader / Title / Description
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction
```

## Related

- [Dialog](/components/dialog)
- [Button](/components/button)
- [Alert](/components/alert)


---

Source: https://slate.electrik.dev/components/sheet.md

---
title: "Sheet"
description: "Extends the dialog component to display content that complements the main content of the screen."
sidebar_order: 27
---

# Sheet

Extends the dialog pattern to slide in content from an edge of the screen. Requires Alpine.js.

## Usage

<x-code-preview>
@verbatim
<x-slate::sheet>
    <x-slate::sheet-trigger>
        <x-slate::button variant="outline">Open</x-slate::button>
    </x-slate::sheet-trigger>
    <x-slate::sheet-content
        side="end"
        title="Edit profile"
        description="Make changes to your profile here. Click save when you are done."
    >
        <div class="grid gap-3 py-2">
            <x-slate::input label="Name" value="Ada Lovelace" />
            <x-slate::input label="Username" value="@ada" />
        </div>
        <x-slot:footer>
            <x-slate::sheet-close>
                <x-slate::button type="submit">Save changes</x-slate::button>
            </x-slate::sheet-close>
        </x-slot:footer>
    </x-slate::sheet-content>
</x-slate::sheet>
@endverbatim
</x-code-preview>

## Sides

Use logical sides: `top`, `bottom`, `start`, `end`.

## Composition

```
Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader / Title / Description
    ├── SheetClose
    └── SheetFooter
```

## Related

- [Dialog](/components/dialog)
- [Popover](/components/popover)


---

Source: https://slate.electrik.dev/components/scroll-area.md

---
title: "Scroll Area"
description: "Augments native scroll functionality for custom, cross-browser styling."
sidebar_order: 28
---

# Scroll Area

Augments native scroll functionality with a thin, themed scrollbar.

## Usage

<x-code-preview preview-height="420px" preview-align="start">
@verbatim
<x-slate::scroll-area class="h-72 w-full max-w-sm rounded-md border">
    <div class="p-4">
        <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
        @foreach (range(1, 50) as $i)
            <div class="text-sm">Tag {{ $i }}</div>
            @if($i < 50)
                <x-slate::separator class="my-2" />
            @endif
        @endforeach
    </div>
</x-slate::scroll-area>
@endverbatim
</x-code-preview>

## Horizontal overflow

Give the area a fixed width and let children overflow on the inline axis.

<x-code-preview>
@verbatim
<x-slate::scroll-area class="w-full max-w-md whitespace-nowrap rounded-md border">
    <div class="flex w-max gap-3 p-4">
        @foreach (['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta', 'Eta'] as $label)
            <x-slate::badge variant="secondary">{{ $label }}</x-slate::badge>
        @endforeach
    </div>
</x-slate::scroll-area>
@endverbatim
</x-code-preview>

## Inside a card

Useful for long lists in constrained layouts like sidebars and settings panels.

<x-code-preview preview-height="360px" preview-align="start">
@verbatim
<x-slate::card class="max-w-sm">
    <x-slate::card-header>
        <x-slate::card-title>Activity</x-slate::card-title>
    </x-slate::card-header>
    <x-slate::card-content class="p-0">
        <x-slate::scroll-area class="h-48 px-6">
            @foreach (range(1, 20) as $i)
                <p class="border-b border-border py-2 text-sm">Event {{ $i }}</p>
            @endforeach
        </x-slate::scroll-area>
    </x-slate::card-content>
</x-slate::card>
@endverbatim
</x-code-preview>

## Related

- [Card](/components/card)
- [Separator](/components/separator)
- [Sidebar](/components/sidebar)


---

Source: https://slate.electrik.dev/components/button-group.md

---
title: "Button Group"
description: "A container that groups related buttons together."
sidebar_order: 29
---

# Button Group

A container that groups related buttons with connected borders.

## Usage

<x-code-preview>
@verbatim
<x-slate::button-group>
    <x-slate::button variant="outline">Archive</x-slate::button>
    <x-slate::button variant="outline">Report</x-slate::button>
    <x-slate::button variant="outline">Snooze</x-slate::button>
</x-slate::button-group>
@endverbatim
</x-code-preview>

## Vertical

<x-code-preview>
@verbatim
<x-slate::button-group orientation="vertical">
    <x-slate::button variant="outline">Top</x-slate::button>
    <x-slate::button variant="outline">Middle</x-slate::button>
    <x-slate::button variant="outline">Bottom</x-slate::button>
</x-slate::button-group>
@endverbatim
</x-code-preview>

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `orientation` | `horizontal` \| `vertical` | `horizontal` | Layout direction |

## Related

- [Button](/components/button)
- [Toggle Group](/components/toggle-group)


---

Source: https://slate.electrik.dev/components/dropdown-menu.md

---
title: "Dropdown Menu"
description: "Displays a menu to the user — such as a set of actions or functions — triggered by a button."
sidebar_order: 30
---

# Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="260px" preview-align="start">
@verbatim
<x-slate::dropdown-menu>
    <x-slate::dropdown-menu-trigger>
        <x-slate::button variant="outline">Open</x-slate::button>
    </x-slate::dropdown-menu-trigger>
    <x-slate::dropdown-menu-content class="w-48">
        <x-slate::dropdown-menu-label>My Account</x-slate::dropdown-menu-label>
        <x-slate::dropdown-menu-separator />
        <x-slate::dropdown-menu-item>
            Profile
            <x-slate::dropdown-menu-shortcut>⇧⌘P</x-slate::dropdown-menu-shortcut>
        </x-slate::dropdown-menu-item>
        <x-slate::dropdown-menu-item>
            Billing
            <x-slate::dropdown-menu-shortcut>⌘B</x-slate::dropdown-menu-shortcut>
        </x-slate::dropdown-menu-item>
        <x-slate::dropdown-menu-item>
            Settings
            <x-slate::dropdown-menu-shortcut>⌘S</x-slate::dropdown-menu-shortcut>
        </x-slate::dropdown-menu-item>
        <x-slate::dropdown-menu-separator />
        <x-slate::dropdown-menu-item variant="destructive">
            Log out
        </x-slate::dropdown-menu-item>
    </x-slate::dropdown-menu-content>
</x-slate::dropdown-menu>
@endverbatim
</x-code-preview>

## Composition

```
DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuLabel
    ├── DropdownMenuSeparator
    ├── DropdownMenuItem
    └── DropdownMenuShortcut
```

## Related

- [Popover](/components/popover)
- [Button](/components/button)
- [Dialog](/components/dialog)


---

Source: https://slate.electrik.dev/components/input.md

---
title: "Input"
description: "Displays a form input field or a component that looks like an input field."
sidebar_order: 2
---

# Input

Displays a form input field or a component that looks like an input field.

## Installation

The Input component is part of Slate UI Kit and is available by default.

## Usage

<x-code-preview>
@verbatim
<x-slate::input placeholder="Enter your email" />
@endverbatim
</x-code-preview>

## Types

The Input component supports all standard HTML input types.

<x-code-preview>
@verbatim
<div class="space-y-3">
<x-slate::input type="text" placeholder="Text" />
<x-slate::input type="email" placeholder="Email" />
<x-slate::input type="password" placeholder="Password" />
<x-slate::input type="number" placeholder="Number" />
<x-slate::input type="tel" placeholder="Phone" />
<x-slate::input type="url" placeholder="URL" />
</div>
@endverbatim
</x-code-preview>

## Sizes

Use the `size` prop to change the size of the input.

<x-code-preview>
@verbatim
<div class="space-y-3">
<x-slate::input size="sm" placeholder="Small" />
<x-slate::input size="default" placeholder="Default" />
<x-slate::input size="lg" placeholder="Large" />
</div>
@endverbatim
</x-code-preview>

## With Label

Use the `label` prop to add a label to the input.

<x-code-preview>
@verbatim
<div class="space-y-3">
<x-slate::input label="Email" type="email" placeholder="Enter your email" />
<x-slate::input label="Password" type="password" placeholder="Enter your password" />
</div>
@endverbatim
</x-code-preview>

## With Help Text

Use the `description` prop (or `help` alias) for supporting copy.

<x-code-preview>
@verbatim
<x-slate::input
    label="Email"
    type="email"
    placeholder="Enter your email"
    description="We'll never share your email with anyone else."
/>
@endverbatim
</x-code-preview>

## Error State

Use the `errorMessage` prop to show an error message.

<x-code-preview>
@verbatim
<x-slate::input 
    label="Email" 
    type="email" 
    placeholder="Enter your email"
    errorMessage="Please enter a valid email address"
/>
@endverbatim
</x-code-preview>

## Disabled State

Disable an input by adding the `disabled` attribute.

<x-code-preview>
@verbatim
<div class="space-y-3">
<x-slate::input disabled placeholder="Disabled input" />
<x-slate::input readonly placeholder="Readonly input" />
</div>
@endverbatim
</x-code-preview>

## Livewire Integration

The Input component automatically detects Livewire and shows loading/error states.

<x-code-preview>
@verbatim
<x-slate::input wire:model="email" placeholder="Email" />
@endverbatim
</x-code-preview>

## API Reference

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | `string` | `"text"` | The HTML input type. Options: `text`, `email`, `password`, `number`, `tel`, `url`, etc. |
| `size` | `string` | `"default"` | The size of the input. Options: `sm`, `default`, `lg` |
| `disabled` | `boolean` | `false` | Disable the input |
| `readonly` | `boolean` | `false` | Make the input readonly |
| `required` | `boolean` | `false` | Make the input required |
| `autofocus` | `boolean` | `false` | Autofocus the input |
| `placeholder` | `string` | `null` | Placeholder text |
| `value` | `string` | `null` | Input value |
| `name` | `string` | `null` | Input name attribute |
| `id` | `string` | `null` | Input ID attribute |
| `label` | `string` | `null` | Label text |
| `help` | `string` | `null` | Help text below input |
| `errorMessage` | `string` | `null` | Error message to display |

### Sizes

- **sm** - Small input (height: 36px)
- **default** - Default input (height: 40px)
- **lg** - Large input (height: 44px)

## Accessibility

The Input component includes:

- Proper label association
- ARIA attributes for error states
- Keyboard navigation support
- Focus visible states
- Disabled state handling

## Related Components

- [Button](/components/button) - Button component
- [Field](/components/field) - Form field wrapper with label helpers



---

Source: https://slate.electrik.dev/components/textarea.md

---
title: "Textarea"
description: "A multiline text input with the same density and validation semantics as input."
sidebar_order: 3
---

# Textarea

A styled native `<textarea>` for longer freeform input. Pass `label` / `description` (or `help`) to compose field helpers automatically.

## Usage

<x-code-preview>
@verbatim
<x-slate::textarea
    label="Bio"
    description="Short and clear works best."
    rows="4"
    placeholder="Tell us about yourself..."
/>
@endverbatim
</x-code-preview>

## Control only

Skip the progressive props when you want the bare control for custom layouts.

<x-code-preview>
@verbatim
<x-slate::textarea placeholder="Write a message..." rows="4" />
@endverbatim
</x-code-preview>

## With field helpers

Prefer the prop API for typical forms. Compose manually when you need custom layout:

<x-code-preview>
@verbatim
<x-slate::field name="bio">
    <x-slate::field-label for="bio">Bio</x-slate::field-label>
    <x-slate::textarea id="bio" name="bio" rows="4" placeholder="Tell us about yourself..." />
    <x-slate::field-description>Short and clear works best.</x-slate::field-description>
</x-slate::field>
@endverbatim
</x-code-preview>

## Rounded styles

<x-code-preview>
@verbatim
<div class="space-y-3">
    <x-slate::textarea rows="3" rounded="sm" placeholder="Small radius" />
    <x-slate::textarea rows="3" rounded="lg" placeholder="Large radius" />
</div>
@endverbatim
</x-code-preview>

## Invalid state

<x-code-preview>
@verbatim
<x-slate::textarea aria-invalid="true" rows="3">This content has an error.</x-slate::textarea>
@endverbatim
</x-code-preview>

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `name` | `string` | — | Input name (also via HTML attribute) |
| `errorKey` | `string` | — | Override validation key for error wiring |
| `rows` | `int` | `4` | Visible line count |
| `rounded` | `none`, `sm`, `md`, `lg`, `xl`, `full` | `md` | Border radius |
| `label` | `string` | — | Compose a `field-label` automatically |
| `description` | `string` | — | Compose a `field-description` automatically |
| `help` | `string` | — | Alias for `description` (2.x compatibility) |
| `errorMessage` | `string` | — | Compose a `field-error` with this message |

All standard HTML attributes (`disabled`, `required`, `wire:model`, `maxlength`, etc.) pass through via `$attributes`.


---

Source: https://slate.electrik.dev/components/select.md

---
title: "Select"
description: "A native select control with semantic styling and placeholder support."
sidebar_order: 4
---

# Select

A styled native `<select>` with a built-in chevron and validation-aware states. Pass `label` / `description` (or `help`) to compose field helpers automatically.

## Usage

<x-code-preview>
@verbatim
<x-slate::select label="Role" placeholder="Select a role">
    <option value="designer">Designer</option>
    <option value="developer">Developer</option>
    <option value="founder">Founder</option>
</x-slate::select>
@endverbatim
</x-code-preview>

## Placeholder

<x-code-preview>
@verbatim
<x-slate::select placeholder="Select a role">
    <option value="designer">Designer</option>
    <option value="developer">Developer</option>
    <option value="founder">Founder</option>
</x-slate::select>
@endverbatim
</x-code-preview>

## With field helpers

Prefer the prop API for typical forms. Compose manually when you need custom layout:

<x-code-preview>
@verbatim
<x-slate::field name="role">
    <x-slate::field-label for="role">Role</x-slate::field-label>
    <x-slate::select id="role" name="role" placeholder="Choose a role">
        <option value="designer">Designer</option>
        <option value="developer">Developer</option>
        <option value="founder">Founder</option>
    </x-slate::select>
    <x-slate::field-description>This helps personalize the docs experience.</x-slate::field-description>
</x-slate::field>
@endverbatim
</x-code-preview>

## Invalid state

<x-code-preview>
@verbatim
<x-slate::select aria-invalid="true">
    <option>Choose an option</option>
</x-slate::select>
@endverbatim
</x-code-preview>

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `name` | `string` | — | Input name (also via HTML attribute) |
| `errorKey` | `string` | — | Override validation key for error wiring |
| `rounded` | `none`, `sm`, `md`, `lg`, `xl`, `full` | `md` | Border radius |
| `placeholder` | `string` | `null` | Disabled placeholder option shown when no value is selected |
| `label` | `string` | — | Compose a `field-label` automatically |
| `description` | `string` | — | Compose a `field-description` automatically |
| `help` | `string` | — | Alias for `description` (2.x compatibility) |
| `errorMessage` | `string` | — | Compose a `field-error` with this message |

All `<option>` elements are passed through the slot, and standard HTML attributes like `disabled`, `required`, and `wire:model` are supported.


---

Source: https://slate.electrik.dev/components/checkbox.md

---
title: "Checkbox"
description: "A native checkbox with custom styling and validation-aware states."
sidebar_order: 5
---

# Checkbox

A styled native `<input type="checkbox">`. Use it bare, or pass `label` / `description` to compose `field` helpers automatically — same progressive pattern as `dark-mode-toggle` on `button`.

## Usage

<x-code-preview>
@verbatim
<x-slate::checkbox label="Accept terms" checked />
@endverbatim
</x-code-preview>

## With description

<x-code-preview>
@verbatim
<x-slate::checkbox
    class="max-w-sm"
    name="updates"
    label="Product updates"
    description="Receive occasional release notes by email."
/>
@endverbatim
</x-code-preview>

## Control only

Skip `label` / `description` when you want the bare control for custom layouts.

<x-code-preview>
@verbatim
<div class="flex items-center gap-3">
    <x-slate::checkbox id="terms-bare" checked />
    <label for="terms-bare" class="text-sm">Accept terms</label>
</div>
@endverbatim
</x-code-preview>

## Rounded styles

<x-code-preview>
@verbatim
<div class="flex flex-wrap items-center gap-4">
    <x-slate::checkbox rounded="sm" checked />
    <x-slate::checkbox rounded="md" checked />
    <x-slate::checkbox rounded="lg" checked />
</div>
@endverbatim
</x-code-preview>

## Invalid state

<x-code-preview>
@verbatim
<x-slate::checkbox
    name="invalid-checkbox"
    label="I agree"
    error-message="You must accept before continuing."
/>
@endverbatim
</x-code-preview>

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | — | When set, composes `field` + `field-label` |
| `description` | `string` | — | Composes `field-description` beside the control |
| `errorMessage` | `string` | — | Manual error copy (also enables composed layout) |
| `showError` | `bool` | `true` when composed | Render `field-error` under the control |
| `name` | `string` | — | Input name (also via HTML attribute) |
| `value` | `string` | `"1"` | Submitted value when checked |
| `checked` | `bool` | `false` | Initial checked state |
| `errorKey` | `string` | — | Override validation key for error wiring |
| `rounded` | `none`, `sm`, `md`, `lg`, `xl`, `full` | `md` | Indicator corner radius |

All standard HTML attributes (`disabled`, `required`, `wire:model`, etc.) pass through to the control.


---

Source: https://slate.electrik.dev/components/switch.md

---
title: "Switch"
description: "A native checkbox rendered as an accessible switch."
sidebar_order: 6
---

# Switch

A styled native checkbox with `role="switch"`. Pass `label` / `description` to compose field helpers automatically.

## Usage

<x-code-preview>
@verbatim
<x-slate::switch
    class="max-w-sm"
    label="Dark mode"
    description="Automatically switch the interface theme."
    checked
/>
@endverbatim
</x-code-preview>

## Control only

Use the bare switch when the label lives elsewhere in the layout.

<x-code-preview>
@verbatim
<div class="flex items-center justify-between gap-4">
    <div>
        <p class="text-sm font-medium">Airplane mode</p>
        <p class="text-sm text-muted-foreground">Disable radios and networking.</p>
    </div>
    <x-slate::switch id="airplane" />
</div>
@endverbatim
</x-code-preview>

## Invalid state

<x-code-preview>
@verbatim
<x-slate::switch
    name="marketing"
    label="Marketing emails"
    error-message="Enable this before saving."
/>
@endverbatim
</x-code-preview>

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | — | Composes `field` + `field-label` |
| `description` | `string` | — | Composes `field-description` |
| `errorMessage` | `string` | — | Manual error copy |
| `showError` | `bool` | `true` when composed | Render `field-error` |
| `name` | `string` | — | Input name |
| `value` | `string` | `"1"` | Submitted value when on |
| `checked` | `bool` | `false` | Initial state |
| `errorKey` | `string` | — | Override validation key |

All standard HTML attributes pass through to the control.


---

Source: https://slate.electrik.dev/components/radio.md

---
title: "Radio"
description: "A native radio input with custom styling."
sidebar_order: 7
---

# Radio

A styled native `<input type="radio">`. Pass `label` / `description` to compose field helpers, or use the bare control in custom layouts.

## Usage

<x-code-preview>
@verbatim
<fieldset class="grid max-w-sm gap-3">
    <legend class="text-sm font-medium">Plan</legend>
    <x-slate::radio name="plan" value="free" label="Free" checked />
    <x-slate::radio name="plan" value="pro" label="Pro" description="Priority support and more seats." />
</fieldset>
@endverbatim
</x-code-preview>

## Control only

<x-code-preview>
@verbatim
<div class="flex items-center gap-3">
    <x-slate::radio id="terms" name="terms" value="accepted" />
    <x-slate::field-label for="terms">I accept the terms</x-slate::field-label>
</div>
@endverbatim
</x-code-preview>

## Invalid state

<x-code-preview>
@verbatim
<x-slate::radio
    name="demo"
    value="1"
    label="Continue"
    error-message="Choose an option to continue."
    :show-error="true"
/>
@endverbatim
</x-code-preview>

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | — | Composes `field` + `field-label` |
| `description` | `string` | — | Composes `field-description` |
| `errorMessage` | `string` | — | Manual error copy |
| `showError` | `bool` | `true` only when `errorMessage` is set | Radio groups rarely want a message on every option |
| `name` | `string` | — | Input name |
| `value` | `string` | `"1"` | Option value |
| `checked` | `bool` | `false` | Initial checked state |
| `errorKey` | `string` | — | Override validation key |

All standard HTML attributes pass through to the control.


---

Source: https://slate.electrik.dev/components/field.md

---
title: "Field"
description: "Composition helpers for labels, descriptions, and validation messages."
sidebar_order: 8
---

# Field

`field`, `field-label`, `field-description`, and `field-error` help compose accessible form controls.

## Usage

<x-code-preview>
@verbatim
<x-slate::field name="email">
    <x-slate::field-label for="email">Email</x-slate::field-label>
    <x-slate::input id="email" name="email" type="email" placeholder="you@example.com" />
    <x-slate::field-description>We'll only use this for account updates.</x-slate::field-description>
    <x-slate::field-error name="email" />
</x-slate::field>
@endverbatim
</x-code-preview>

## Invalid state

When the `name` matches a validation error key, the field sets `data-invalid="true"` so child helpers can react.

<x-code-preview>
@verbatim
<x-slate::field name="email" :invalid="true">
    <x-slate::field-label for="invalid-email">Email</x-slate::field-label>
    <x-slate::input id="invalid-email" name="email" aria-invalid="true" value="wrong" />
    <x-slate::field-error message="Please enter a valid email address." />
</x-slate::field>
@endverbatim
</x-code-preview>

## Disabled field

<x-code-preview>
@verbatim
<x-slate::field :disabled="true">
    <x-slate::field-label for="disabled-name">Display name</x-slate::field-label>
    <x-slate::input id="disabled-name" disabled value="Jane Doe" />
    <x-slate::field-description>This field is locked for your account.</x-slate::field-description>
</x-slate::field>
@endverbatim
</x-code-preview>

## Props

### `x-slate::field`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `name` | `string` | — | Validation key used to infer invalid state |
| `invalid` | `bool` | `null` | Force the invalid state |
| `disabled` | `bool` | `false` | Adds `data-disabled="true"` for child styling |

### `x-slate::field-error`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `name` | `string` | — | Validation key to read from the shared error bag |
| `message` | `string` | `null` | Manual error message override |

`field-label` and `field-description` are slot-only helpers that style text and inherit invalid / disabled state from the wrapping field.


---

Source: https://slate.electrik.dev/components/dark-mode-toggle.md

---
title: "Dark mode toggle"
description: "Toggle light and dark themes by switching the .dark class on html."
sidebar_order: 9
---

# Dark mode toggle

An Alpine-powered control that toggles the `.dark` class on `<html>`. It renders `x-slate::button`, so every button prop works here too.

The preferred theme is stored in `localStorage` under `slate-theme` (`dark` / `light`) and restored on load. Include a small boot script in your layout `<head>` (see the docs site `theme-init` component) to avoid a flash of the wrong theme.

## Usage

<x-code-preview>
@verbatim
<x-slate::dark-mode-toggle />
@endverbatim
</x-code-preview>

Defaults are `variant="ghost"` and `size="icon"`.

## Variants

<x-code-preview>
@verbatim
<div class="flex items-center gap-2">
    <x-slate::dark-mode-toggle />
    <x-slate::dark-mode-toggle variant="outline" />
    <x-slate::dark-mode-toggle variant="secondary" />
</div>
@endverbatim
</x-code-preview>

## Sizes

<x-code-preview>
@verbatim
<div class="flex items-center gap-2">
    <x-slate::dark-mode-toggle size="icon-xs" />
    <x-slate::dark-mode-toggle size="icon-sm" />
    <x-slate::dark-mode-toggle size="icon" />
    <x-slate::dark-mode-toggle size="icon-lg" />
</div>
@endverbatim
</x-code-preview>

## Props

Same as [Button](/components/button): `variant`, `size`, `rounded`, `animation`, `as`, `type`, plus any HTML attributes (`class`, etc.).

## Requirements

Alpine.js must be loaded on the page. Livewire 3 projects include Alpine by default.


---

Source: https://slate.electrik.dev/components/radio-group.md

---
title: "Radio Group"
description: "A fieldset-like group for selecting a single option from related radio buttons."
sidebar_order: 37
---

# Radio Group

Groups related radio options with shared Alpine state. Supports progressive `label`, `description`, and `errorMessage` props like other form controls.

## Usage

<x-code-preview>
@verbatim
<x-slate::radio-group label="Notify me about" description="Choose how you want to receive updates.">
    <x-slate::radio-group-item value="all" label="All new messages" />
    <x-slate::radio-group-item value="mentions" label="Direct messages and mentions" />
    <x-slate::radio-group-item value="none" label="Nothing" />
</x-slate::radio-group>
@endverbatim
</x-code-preview>

## Horizontal

<x-code-preview>
@verbatim
<x-slate::radio-group orientation="horizontal" default-value="monthly">
    <x-slate::radio-group-item value="monthly" label="Monthly" />
    <x-slate::radio-group-item value="yearly" label="Yearly" />
</x-slate::radio-group>
@endverbatim
</x-code-preview>

## Composition

```
RadioGroup
└── RadioGroupItem (repeat)
```

## Related

- [Radio](/components/radio)
- [Field](/components/field)


---

Source: https://slate.electrik.dev/components/file-input.md

---
title: "File Input"
description: "A styled file upload control with progressive label, description, and error support."
sidebar_order: 38
---

# File Input

A styled file upload control that mirrors the progressive form API of `input`. Shows the selected filename after choosing a file.

## Usage

<x-code-preview>
@verbatim
<x-slate::file-input label="Upload document" description="PDF, DOC, or DOCX up to 10 MB." />
@endverbatim
</x-code-preview>

## Accept and multiple

Pass native attributes through — they land on the underlying `<input type="file">`.

<x-code-preview>
@verbatim
<x-slate::file-input
    label="Assets"
    description="PNG or SVG. Multiple files allowed."
    accept=".png,.svg,image/png,image/svg+xml"
    multiple
/>
@endverbatim
</x-code-preview>

## With error

Use `errorMessage` for static demos or Livewire validation.

<x-code-preview>
@verbatim
<x-slate::file-input
    label="Avatar"
    error-message="Please select an image file."
/>
@endverbatim
</x-code-preview>

## Related

- [Input](/components/input)
- [Field](/components/field)
- [Form](/components/form)


---

Source: https://slate.electrik.dev/components/form.md

---
title: "Form"
description: "A simple form wrapper with consistent vertical spacing."
sidebar_order: 39
---

# Form

A lightweight form layout wrapper with built-in gap spacing. Pair with `form-item` for grouped fields.

## Usage

<x-code-preview>
@verbatim
<x-slate::form>
    <x-slate::form-item>
        <x-slate::input label="Name" placeholder="Ada Lovelace" />
    </x-slate::form-item>
    <x-slate::form-item>
        <x-slate::input label="Email" type="email" placeholder="ada@example.com" />
    </x-slate::form-item>
    <x-slate::button type="submit">Submit</x-slate::button>
</x-slate::form>
@endverbatim
</x-code-preview>

## With validation states

Progressive `errorMessage` props work the same inside form items.

<x-code-preview>
@verbatim
<x-slate::form>
    <x-slate::form-item>
        <x-slate::input
            label="Email"
            type="email"
            value="not-an-email"
            error-message="Enter a valid email address."
        />
    </x-slate::form-item>
    <x-slate::form-item>
        <x-slate::textarea
            label="Bio"
            rows="3"
            description="Optional. Shown on your public profile."
        />
    </x-slate::form-item>
    <div class="flex justify-end gap-2">
        <x-slate::button type="button" variant="outline">Cancel</x-slate::button>
        <x-slate::button type="submit">Save</x-slate::button>
    </div>
</x-slate::form>
@endverbatim
</x-code-preview>

## Composition

```
Form
└── FormItem (repeat)
    └── Field controls
```

See the [form validation block](/blocks/form-validation) for a fuller card pattern.

## Related

- [Field](/components/field)
- [Input](/components/input)
- [Livewire](/docs/livewire)


---

Source: https://slate.electrik.dev/components/rating.md

---
title: "Rating"
description: "An interactive star rating control powered by Alpine.js."
sidebar_order: 40
---

# Rating

An interactive star rating control. Requires Alpine.js.

## Usage

<x-code-preview>
@verbatim
<x-slate::rating :value="3" label="Rate this article" />
@endverbatim
</x-code-preview>

## Custom max

<x-code-preview>
@verbatim
<x-slate::rating :value="4" :max="10" name="score" />
@endverbatim
</x-code-preview>

## Readonly

Use `readonly` for aggregate scores that should not be edited.

<x-code-preview>
@verbatim
<div class="space-y-4">
    <x-slate::rating :value="5" readonly label="Average rating" />
    <x-slate::rating :value="2" readonly label="Support response" />
</div>
@endverbatim
</x-code-preview>

## In a review card

<x-code-preview>
@verbatim
<x-slate::card class="max-w-sm">
    <x-slate::card-header>
        <x-slate::card-title>Leave a review</x-slate::card-title>
        <x-slate::card-description>How was your experience?</x-slate::card-description>
    </x-slate::card-header>
    <x-slate::card-content class="space-y-4">
        <x-slate::rating :value="4" name="rating" label="Overall" />
        <x-slate::textarea label="Comments" rows="3" placeholder="Optional feedback…" />
    </x-slate::card-content>
    <x-slate::card-footer class="justify-end">
        <x-slate::button size="sm">Submit</x-slate::button>
    </x-slate::card-footer>
</x-slate::card>
@endverbatim
</x-code-preview>

## Related

- [Slider](/components/slider)
- [Switch](/components/switch)
- [Form](/components/form)


---

Source: https://slate.electrik.dev/components/timeline.md

---
title: "Timeline"
description: "Display a chronological sequence of events with indicators and content."
sidebar_order: 41
---

# Timeline

Display a chronological sequence of events with indicators and content blocks.

## Usage

<x-code-preview>
@verbatim
<x-slate::timeline>
    <x-slate::timeline-item>
        <x-slate::timeline-indicator>
            <span class="size-2 rounded-full bg-primary"></span>
        </x-slate::timeline-indicator>
        <x-slate::timeline-content>
            <x-slate::timeline-title title="Order placed" />
            <x-slate::timeline-description description="Your order has been confirmed." />
        </x-slate::timeline-content>
    </x-slate::timeline-item>
    <x-slate::timeline-item>
        <x-slate::timeline-indicator>
            <span class="size-2 rounded-full bg-muted-foreground"></span>
        </x-slate::timeline-indicator>
        <x-slate::timeline-content>
            <x-slate::timeline-title title="Shipped" />
            <x-slate::timeline-description description="Package is on the way." />
        </x-slate::timeline-content>
    </x-slate::timeline-item>
</x-slate::timeline>
@endverbatim
</x-code-preview>

## Composition

```
Timeline
└── TimelineItem
    ├── TimelineIndicator
    └── TimelineContent
        ├── TimelineTitle
        └── TimelineDescription
```

## Related

- [Stepper](/components/stepper)
- [Separator](/components/separator)


---

Source: https://slate.electrik.dev/components/stepper.md

---
title: "Stepper"
description: "A multi-step progress indicator with active, complete, and inactive states."
sidebar_order: 42
---

# Stepper

A multi-step progress indicator. Uses Alpine.js to track the current step via `current` or `value`.

## Usage

<x-code-preview>
@verbatim
<x-slate::stepper :current="2">
    <x-slate::stepper-item :step="1" title="Account" description="Create your account" />
    <x-slate::stepper-item :step="2" title="Profile" description="Add your details" />
    <x-slate::stepper-item :step="3" title="Review" description="Confirm and submit" />
</x-slate::stepper>
@endverbatim
</x-code-preview>

## First step

<x-code-preview>
@verbatim
<x-slate::stepper :current="1">
    <x-slate::stepper-item :step="1" title="Details" description="Project basics" />
    <x-slate::stepper-item :step="2" title="Members" description="Invite your team" />
    <x-slate::stepper-item :step="3" title="Launch" description="Go live" />
</x-slate::stepper>
@endverbatim
</x-code-preview>

## Completed flow

<x-code-preview>
@verbatim
<x-slate::stepper :current="3">
    <x-slate::stepper-item :step="1" title="Cart" />
    <x-slate::stepper-item :step="2" title="Shipping" />
    <x-slate::stepper-item :step="3" title="Payment" />
</x-slate::stepper>
@endverbatim
</x-code-preview>

## Composition

```
Stepper
└── StepperItem
    ├── StepperTitle
    └── StepperDescription
```

Progressive `title` / `description` props on `stepper-item` compose the title and description parts for you.

## Related

- [Timeline](/components/timeline)
- [Progress](/components/progress)
- [Form](/components/form)


---

Source: https://slate.electrik.dev/components/marquee.md

---
title: "Marquee"
description: "An infinitely scrolling content strip with CSS animation."
sidebar_order: 43
---

# Marquee

An infinitely scrolling content strip powered by CSS animation. Pauses on hover by default.

## Usage

<x-code-preview preview-min-height="80px">
@verbatim
<x-slate::marquee>
    <x-slate::badge variant="secondary">Tailwind CSS</x-slate::badge>
    <x-slate::badge variant="secondary">Alpine.js</x-slate::badge>
    <x-slate::badge variant="secondary">Laravel</x-slate::badge>
    <x-slate::badge variant="secondary">Livewire</x-slate::badge>
    <x-slate::badge variant="secondary">Blade</x-slate::badge>
</x-slate::marquee>
@endverbatim
</x-code-preview>

## Reverse

<x-code-preview preview-min-height="80px">
@verbatim
<x-slate::marquee reverse :duration="20">
    <span class="text-sm text-muted-foreground">Scrolling the other way →</span>
    <span class="text-sm text-muted-foreground">Still moving →</span>
    <span class="text-sm text-muted-foreground">Keep going →</span>
</x-slate::marquee>
@endverbatim
</x-code-preview>

## Related

- [Badge](/components/badge)
- [Carousel](/components/carousel)


---

Source: https://slate.electrik.dev/components/drawer.md

---
title: "Drawer"
description: "A panel that slides in from an edge, defaulting to the bottom of the screen."
sidebar_order: 44
---

# Drawer

A panel that slides in from an edge of the screen. Defaults to `side="bottom"` with a drag handle. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="320px">
@verbatim
<x-slate::drawer>
    <x-slate::drawer-trigger>
        <x-slate::button variant="outline">Open drawer</x-slate::button>
    </x-slate::drawer-trigger>
    <x-slate::drawer-content
        title="Move goal"
        description="Set your daily activity goal."
    >
        <div class="grid gap-3 py-2">
            <x-slate::input label="Goal" value="350" type="number" />
        </div>
        <x-slot:footer>
            <x-slate::drawer-close>
                <x-slate::button class="w-full">Save</x-slate::button>
            </x-slate::drawer-close>
        </x-slot:footer>
    </x-slate::drawer-content>
</x-slate::drawer>
@endverbatim
</x-code-preview>

## Composition

```
Drawer
├── DrawerTrigger
└── DrawerContent
    ├── DrawerHeader / Title / Description
    ├── DrawerClose
    └── DrawerFooter
```

## Related

- [Sheet](/components/sheet)
- [Dialog](/components/dialog)


---

Source: https://slate.electrik.dev/components/carousel.md

---
title: "Carousel"
description: "A slideshow for cycling through content with previous and next controls."
sidebar_order: 45
---

# Carousel

A slideshow for cycling through content. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="200px">
@verbatim
<x-slate::carousel class="mx-auto max-w-xs">
    <x-slate::carousel-content>
        <x-slate::carousel-item>
            <x-slate::card class="p-6 text-center">Slide 1</x-slate::card>
        </x-slate::carousel-item>
        <x-slate::carousel-item>
            <x-slate::card class="p-6 text-center">Slide 2</x-slate::card>
        </x-slate::carousel-item>
        <x-slate::carousel-item>
            <x-slate::card class="p-6 text-center">Slide 3</x-slate::card>
        </x-slate::carousel-item>
    </x-slate::carousel-content>
    <x-slate::carousel-previous />
    <x-slate::carousel-next />
</x-slate::carousel>
@endverbatim
</x-code-preview>

## Composition

```
Carousel
├── CarouselContent
│   └── CarouselItem (repeat)
├── CarouselPrevious
└── CarouselNext
```

## Related

- [Marquee](/components/marquee)
- [Tabs](/components/tabs)


---

Source: https://slate.electrik.dev/components/resizable.md

---
title: "Resizable"
description: "Adjustable panel layouts with draggable handles."
sidebar_order: 46
---

# Resizable

Adjustable panel layouts with draggable handles. Requires Alpine.js. Supports horizontal and vertical orientations.

## Usage

<x-code-preview preview-height="220px" preview-align="start">
@verbatim
<x-slate::resizable-panel-group class="h-full min-h-[200px] rounded-md border">
    <x-slate::resizable-panel :index="0" :default-size="40" class="flex items-center justify-center bg-muted/20 p-6">
        <span class="text-sm text-muted-foreground">Panel A</span>
    </x-slate::resizable-panel>
    <x-slate::resizable-handle :index="0" />
    <x-slate::resizable-panel :index="1" :default-size="60" class="flex items-center justify-center p-6">
        <span class="text-sm text-muted-foreground">Panel B</span>
    </x-slate::resizable-panel>
</x-slate::resizable-panel-group>
@endverbatim
</x-code-preview>

## Vertical

Set `orientation="vertical"` on the group.

<x-code-preview preview-height="280px" preview-align="start">
@verbatim
<x-slate::resizable-panel-group orientation="vertical" class="h-[240px] rounded-md border">
    <x-slate::resizable-panel :index="0" :default-size="35" class="flex items-center justify-center bg-muted/20 p-4">
        <span class="text-sm text-muted-foreground">Top</span>
    </x-slate::resizable-panel>
    <x-slate::resizable-handle :index="0" />
    <x-slate::resizable-panel :index="1" :default-size="65" class="flex items-center justify-center p-4">
        <span class="text-sm text-muted-foreground">Bottom</span>
    </x-slate::resizable-panel>
</x-slate::resizable-panel-group>
@endverbatim
</x-code-preview>

## Three panels

Add another handle and panel — keep `index` sequential.

<x-code-preview preview-height="220px" preview-align="start">
@verbatim
<x-slate::resizable-panel-group class="h-full min-h-[200px] rounded-md border">
    <x-slate::resizable-panel :index="0" :default-size="25" class="flex items-center justify-center bg-muted/20 p-4">
        <span class="text-sm text-muted-foreground">Nav</span>
    </x-slate::resizable-panel>
    <x-slate::resizable-handle :index="0" />
    <x-slate::resizable-panel :index="1" :default-size="50" class="flex items-center justify-center p-4">
        <span class="text-sm text-muted-foreground">Main</span>
    </x-slate::resizable-panel>
    <x-slate::resizable-handle :index="1" />
    <x-slate::resizable-panel :index="2" :default-size="25" class="flex items-center justify-center bg-muted/20 p-4">
        <span class="text-sm text-muted-foreground">Aside</span>
    </x-slate::resizable-panel>
</x-slate::resizable-panel-group>
@endverbatim
</x-code-preview>

## Composition

```
ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel
```

## Related

- [Scroll Area](/components/scroll-area)
- [Separator](/components/separator)
- [App Shell](/components/app-shell)


---

Source: https://slate.electrik.dev/components/context-menu.md

---
title: "Context Menu"
description: "A menu triggered by right-click, positioned at the cursor."
sidebar_order: 47
---

# Context Menu

A menu triggered by right-click, positioned at the cursor. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="160px">
@verbatim
<x-slate::context-menu>
    <x-slate::context-menu-trigger class="flex h-32 w-full items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">
        Right click here
    </x-slate::context-menu-trigger>
    <x-slate::context-menu-content>
        <x-slate::context-menu-label>Actions</x-slate::context-menu-label>
        <x-slate::context-menu-item>Back</x-slate::context-menu-item>
        <x-slate::context-menu-item>Forward</x-slate::context-menu-item>
        <x-slate::context-menu-separator />
        <x-slate::context-menu-item variant="destructive">Delete</x-slate::context-menu-item>
    </x-slate::context-menu-content>
</x-slate::context-menu>
@endverbatim
</x-code-preview>

## Composition

```
ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
    ├── ContextMenuLabel
    ├── ContextMenuItem
    └── ContextMenuSeparator
```

## Related

- [Dropdown Menu](/components/dropdown-menu)
- [Menubar](/components/menubar)


---

Source: https://slate.electrik.dev/components/command.md

---
title: "Command"
description: "A searchable command palette list for quick actions and navigation."
sidebar_order: 48
---

# Command

A searchable command palette list. Filters items as you type. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="280px">
@verbatim
<x-slate::command class="rounded-lg border shadow-md">
    <div class="flex items-center border-b px-3">
        <x-slate::command-input placeholder="Type a command..." />
    </div>
    <x-slate::command-list>
        <x-slate::command-empty>No results found.</x-slate::command-empty>
        <x-slate::command-group heading="Suggestions">
            <x-slate::command-item value="calendar">Calendar</x-slate::command-item>
            <x-slate::command-item value="search">Search</x-slate::command-item>
            <x-slate::command-item value="settings">Settings</x-slate::command-item>
        </x-slate::command-group>
        <x-slate::command-separator />
        <x-slate::command-group heading="Settings">
            <x-slate::command-item value="profile">Profile</x-slate::command-item>
            <x-slate::command-item value="billing">Billing</x-slate::command-item>
        </x-slate::command-group>
    </x-slate::command-list>
</x-slate::command>
@endverbatim
</x-code-preview>

## Composition

```
Command
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandGroup
    │   └── CommandItem
    └── CommandSeparator
```

## Related

- [Combobox](/components/combobox)
- [Dropdown Menu](/components/dropdown-menu)


---

Source: https://slate.electrik.dev/components/combobox.md

---
title: "Combobox"
description: "An autocomplete input with a filterable listbox of options."
sidebar_order: 49
---

# Combobox

An autocomplete input with a filterable listbox. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="240px" preview-align="start">
@verbatim
<x-slate::combobox class="max-w-xs">
    <x-slate::combobox-input placeholder="Select framework..." />
    <x-slate::combobox-content>
        <x-slate::combobox-item value="laravel">Laravel</x-slate::combobox-item>
        <x-slate::combobox-item value="livewire">Livewire</x-slate::combobox-item>
        <x-slate::combobox-item value="alpine">Alpine.js</x-slate::combobox-item>
        <x-slate::combobox-item value="tailwind">Tailwind CSS</x-slate::combobox-item>
    </x-slate::combobox-content>
</x-slate::combobox>
@endverbatim
</x-code-preview>

## With a field label

<x-code-preview preview-min-height="240px" preview-align="start">
@verbatim
<x-slate::field class="max-w-xs">
    <x-slate::field-label>Stack</x-slate::field-label>
    <x-slate::combobox>
        <x-slate::combobox-input placeholder="Search…" />
        <x-slate::combobox-content>
            <x-slate::combobox-item value="blade">Blade</x-slate::combobox-item>
            <x-slate::combobox-item value="livewire">Livewire</x-slate::combobox-item>
            <x-slate::combobox-item value="inertia">Inertia</x-slate::combobox-item>
        </x-slate::combobox-content>
    </x-slate::combobox>
    <x-slate::field-description>Type to filter options.</x-slate::field-description>
</x-slate::field>
@endverbatim
</x-code-preview>

## Composition

```
Combobox
├── ComboboxInput
└── ComboboxContent
    └── ComboboxItem (repeat)
```

Prefer a command palette pattern? See [Command](/components/command). Prefer a native select? See [Select](/components/select).

## Related

- [Command](/components/command)
- [Select](/components/select)
- [Popover](/components/popover)


---

Source: https://slate.electrik.dev/components/calendar.md

---
title: "Calendar"
description: "A simple month grid date picker with previous and next navigation."
sidebar_order: 50
---

# Calendar

A simple month grid date picker. Value is stored as `Y-m-d`. Requires Alpine.js.

## Usage

<x-code-preview>
@verbatim
<x-slate::calendar value="2026-08-20" name="date" />
@endverbatim
</x-code-preview>

## Default value

Use `default-value` when the picker should start on a date without a controlled `value`.

<x-code-preview>
@verbatim
<x-slate::calendar default-value="2026-08-01" name="start_date" />
@endverbatim
</x-code-preview>

## With form field

Compose with field helpers for labels and descriptions.

<x-code-preview>
@verbatim
<x-slate::field>
    <x-slate::field-label>Start date</x-slate::field-label>
    <x-slate::calendar default-value="2026-08-01" name="start_date" />
    <x-slate::field-description>Stored as Y-m-d.</x-slate::field-description>
</x-slate::field>
@endverbatim
</x-code-preview>

## In a popover

Pair with popover for compact date entry in dense forms.

<x-code-preview>
@verbatim
<x-slate::popover>
    <x-slate::popover-trigger>
        <x-slate::button variant="outline">Pick a date</x-slate::button>
    </x-slate::popover-trigger>
    <x-slate::popover-content class="w-auto p-0">
        <x-slate::calendar default-value="2026-08-20" name="popover_date" />
    </x-slate::popover-content>
</x-slate::popover>
@endverbatim
</x-code-preview>

## Related

- [Input](/components/input)
- [Popover](/components/popover)
- [Form](/components/form)


---

Source: https://slate.electrik.dev/components/menubar.md

---
title: "Menubar"
description: "A horizontal menu bar with dropdown submenus, one open at a time."
sidebar_order: 51
---

# Menubar

A horizontal menu bar with dropdown submenus. Only one menu opens at a time. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="200px" preview-align="start">
@verbatim
<x-slate::menubar>
    <x-slate::menubar-menu>
        <x-slate::menubar-trigger>File</x-slate::menubar-trigger>
        <x-slate::menubar-content>
            <x-slate::menubar-item>New tab</x-slate::menubar-item>
            <x-slate::menubar-item>New window</x-slate::menubar-item>
            <x-slate::menubar-separator />
            <x-slate::menubar-item>Share</x-slate::menubar-item>
        </x-slate::menubar-content>
    </x-slate::menubar-menu>
    <x-slate::menubar-menu>
        <x-slate::menubar-trigger>Edit</x-slate::menubar-trigger>
        <x-slate::menubar-content>
            <x-slate::menubar-item>Undo</x-slate::menubar-item>
            <x-slate::menubar-item>Redo</x-slate::menubar-item>
        </x-slate::menubar-content>
    </x-slate::menubar-menu>
</x-slate::menubar>
@endverbatim
</x-code-preview>

## Composition

```
Menubar
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        ├── MenubarItem
        └── MenubarSeparator
```

## Related

- [Dropdown Menu](/components/dropdown-menu)
- [Navigation Menu](/components/navigation-menu)


---

Source: https://slate.electrik.dev/components/navigation-menu.md

---
title: "Navigation Menu"
description: "A site navigation component with hover and click dropdown panels."
sidebar_order: 52
---

# Navigation Menu

A site navigation component with hover and click dropdown panels. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="200px" preview-align="start">
@verbatim
<x-slate::navigation-menu>
    <x-slate::navigation-menu-list>
        <x-slate::navigation-menu-item>
            <x-slate::navigation-menu-trigger>Getting started</x-slate::navigation-menu-trigger>
            <x-slate::navigation-menu-content>
                <ul class="grid gap-2 md:w-96">
                    <li>
                        <x-slate::navigation-menu-link href="#">
                            <div class="font-medium">Introduction</div>
                            <p class="text-sm text-muted-foreground">Overview of Slate components.</p>
                        </x-slate::navigation-menu-link>
                    </li>
                    <li>
                        <x-slate::navigation-menu-link href="#">
                            <div class="font-medium">Installation</div>
                            <p class="text-sm text-muted-foreground">Add Slate to your Laravel app.</p>
                        </x-slate::navigation-menu-link>
                    </li>
                </ul>
            </x-slate::navigation-menu-content>
        </x-slate::navigation-menu-item>
        <x-slate::navigation-menu-item>
            <x-slate::navigation-menu-link href="#">Docs</x-slate::navigation-menu-link>
        </x-slate::navigation-menu-item>
    </x-slate::navigation-menu-list>
</x-slate::navigation-menu>
@endverbatim
</x-code-preview>

## Composition

```
NavigationMenu
└── NavigationMenuList
    └── NavigationMenuItem
        ├── NavigationMenuTrigger
        ├── NavigationMenuContent
        └── NavigationMenuLink
```

## Related

- [Menubar](/components/menubar)
- [Breadcrumb](/components/breadcrumb)


---

Source: https://slate.electrik.dev/components/sidebar.md

---
title: "Sidebar"
description: "A collapsible application sidebar with menu items and inset content area."
sidebar_order: 53
---

# Sidebar

A collapsible application sidebar with menu items and an inset content area. Requires Alpine.js via `sidebar-provider`.

## Usage

<x-code-preview preview-height="280px" preview-align="start">
@verbatim
<x-slate::sidebar-provider class="min-h-[240px] rounded-md border">
    <x-slate::sidebar>
        <x-slate::sidebar-header>
            <span class="text-sm font-semibold">Acme Inc</span>
        </x-slate::sidebar-header>
        <x-slate::sidebar-content>
            <x-slate::sidebar-menu>
                <x-slate::sidebar-menu-item>
                    <x-slate::sidebar-menu-button active href="#">Dashboard</x-slate::sidebar-menu-button>
                </x-slate::sidebar-menu-item>
                <x-slate::sidebar-menu-item>
                    <x-slate::sidebar-menu-button href="#">Settings</x-slate::sidebar-menu-button>
                </x-slate::sidebar-menu-item>
            </x-slate::sidebar-menu>
        </x-slate::sidebar-content>
        <x-slate::sidebar-footer>
            <span class="text-xs text-muted-foreground">v3.0.0</span>
        </x-slate::sidebar-footer>
    </x-slate::sidebar>
    <x-slate::sidebar-inset>
        <div class="flex h-14 items-center gap-2 border-b px-4">
            <x-slate::sidebar-trigger />
            <span class="text-sm font-medium">Dashboard</span>
        </div>
        <div class="p-4">
            <p class="text-sm text-muted-foreground">Main content area.</p>
        </div>
    </x-slate::sidebar-inset>
</x-slate::sidebar-provider>
@endverbatim
</x-code-preview>

## Composition

```
SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   ├── SidebarContent
│   │   └── SidebarMenu
│   │       └── SidebarMenuItem
│   │           └── SidebarMenuButton
│   └── SidebarFooter
├── SidebarInset
└── SidebarTrigger
```

## Related

- [App Shell](/components/app-shell)
- [Navigation Menu](/components/navigation-menu)


---

Source: https://slate.electrik.dev/components/app-shell.md

---
title: "App Shell"
description: "A simple application layout with optional header, sidebar, and main content slots."
sidebar_order: 54
---

# App Shell

A simple application layout with optional header, sidebar, and main content areas. The header can use `sidebar-trigger` to toggle the sidebar — Alpine `open` state lives on the shell.

## Usage

<x-code-preview preview-min-height="240px" preview-align="start">
@verbatim
<x-slate::app-shell class="min-h-[220px] rounded-md border">
    <x-slot:header>
        <x-slate::sidebar-trigger />
        <span class="text-sm font-medium">My App</span>
    </x-slot:header>
    <x-slot:sidebar>
        <aside class="w-48 shrink-0 border-e bg-muted/30 p-4">
            <nav class="grid gap-1 text-sm">
                <a href="#" class="rounded-md px-2 py-1.5 hover:bg-accent">Home</a>
                <a href="#" class="rounded-md px-2 py-1.5 hover:bg-accent">Projects</a>
            </nav>
        </aside>
    </x-slot:sidebar>
    <x-slot:main>
        <div class="p-6">
            <h2 class="text-lg font-semibold">Welcome</h2>
            <p class="mt-2 text-sm text-muted-foreground">Your main content goes here.</p>
        </div>
    </x-slot:main>
</x-slate::app-shell>
@endverbatim
</x-code-preview>

## Related

- [Sidebar](/components/sidebar)
- [Card](/components/card)


---

Source: https://slate.electrik.dev/components/chart.md

---
title: "Chart"
description: "A minimal CSS bar chart from JSON data or composed bar slots."
sidebar_order: 55
---

# Chart

A minimal CSS bar chart with no charting library. Pass a JSON `data` prop or compose `chart-bar` children.

## Usage

<x-code-preview>
@verbatim
<x-slate::chart :data="[
    ['label' => 'Jan', 'value' => 40],
    ['label' => 'Feb', 'value' => 65],
    ['label' => 'Mar', 'value' => 50],
    ['label' => 'Apr', 'value' => 80],
]" />
@endverbatim
</x-code-preview>

## Composed bars

Use `chart-bar` when you want explicit control over each column.

<x-code-preview>
@verbatim
<x-slate::chart class="h-48">
    <x-slate::chart-bar label="Q1" :value="30" />
    <x-slate::chart-bar label="Q2" :value="55" />
    <x-slate::chart-bar label="Q3" :value="45" />
    <x-slate::chart-bar label="Q4" :value="70" />
</x-slate::chart>
@endverbatim
</x-code-preview>

## In a card

Charts sit well inside cards for dashboard blocks.

<x-code-preview>
@verbatim
<x-slate::card class="max-w-md">
    <x-slate::card-header>
        <x-slate::card-title>Signups</x-slate::card-title>
        <x-slate::card-description>Last four months</x-slate::card-description>
    </x-slate::card-header>
    <x-slate::card-content>
        <x-slate::chart class="h-40" :data="[
            ['label' => 'May', 'value' => 24],
            ['label' => 'Jun', 'value' => 36],
            ['label' => 'Jul', 'value' => 31],
            ['label' => 'Aug', 'value' => 48],
        ]" />
    </x-slate::card-content>
</x-slate::card>
@endverbatim
</x-code-preview>

## Composition

```
Chart
└── ChartBar (repeat, or data prop)
```

## Related

- [Progress](/components/progress)
- [Card](/components/card)
- [Blocks](/blocks)


---

Source: https://slate.electrik.dev/components/spotlight.md

---
title: "Spotlight"
description: "A decorative radial gradient that follows the mouse cursor."
sidebar_order: 56
---

# Spotlight

A decorative radial gradient spotlight that follows the mouse cursor inside its container. Requires Alpine.js.

## Usage

<x-code-preview preview-min-height="200px">
@verbatim
<x-slate::spotlight class="flex h-48 items-center justify-center rounded-lg border">
    <p class="relative z-10 text-sm text-muted-foreground">Move your cursor here</p>
</x-slate::spotlight>
@endverbatim
</x-code-preview>

## Custom color and size

<x-code-preview preview-min-height="200px">
@verbatim
<x-slate::spotlight
    :size="400"
    color="rgba(59, 130, 246, 0.12)"
    class="flex h-48 items-center justify-center rounded-lg border"
>
    <p class="relative z-10 text-sm font-medium">Blue spotlight</p>
</x-slate::spotlight>
@endverbatim
</x-code-preview>

## Empty state treatment

Combine with empty composition for a soft call-to-action surface.

<x-code-preview preview-min-height="240px">
@verbatim
<x-slate::spotlight class="rounded-xl border border-dashed">
    <x-slate::empty
        class="border-0"
        title="Nothing here yet"
        description="Create a project to light up this space."
    >
        <x-slot:actions>
            <x-slate::button size="sm">New project</x-slate::button>
        </x-slot:actions>
    </x-slate::empty>
</x-slate::spotlight>
@endverbatim
</x-code-preview>

## Related

- [Card](/components/card)
- [Empty](/components/empty)
- [Empty state block](/blocks/empty-state)


---

Source: https://slate.electrik.dev/components/toast.md

---
title: "Toast"
description: "Temporary notifications that slide in from a screen edge."
sidebar_order: 55
---

# Toast

Temporary notifications that appear above the page. Mount a single `toaster` in your layout, then dispatch `slate-toast` events from anywhere. Requires Alpine.js.

> **API freeze:** the `slate-toast` event name and `detail` fields (`id`, `title`, `description`, `variant`, `duration`) are frozen — see [API freeze](/docs/api-freeze).

## Usage

<x-code-preview preview-min-height="120px">
@verbatim
<x-slate::button
    variant="outline"
    @click="$dispatch('slate-toast', {
        title: 'Scheduled',
        description: 'Your meeting was added to the calendar.'
    })"
>
    Show toast
</x-slate::button>
@endverbatim
</x-code-preview>

## Variants

Use `variant`: `default`, `destructive`, `success`, `warning`, or `info`.

<x-code-preview preview-min-height="120px">
@verbatim
<div class="flex flex-wrap gap-2">
    <x-slate::button
        variant="outline"
        @click="$dispatch('slate-toast', { title: 'Saved', description: 'Your changes are live.', variant: 'success' })"
    >
        Success
    </x-slate::button>

    <x-slate::button
        variant="outline"
        @click="$dispatch('slate-toast', { title: 'Something went wrong', description: 'Please try again.', variant: 'destructive' })"
    >
        Destructive
    </x-slate::button>

    <x-slate::button
        variant="outline"
        @click="$dispatch('slate-toast', { title: 'Heads up', description: 'Your trial ends in 3 days.', variant: 'warning' })"
    >
        Warning
    </x-slate::button>
</div>
@endverbatim
</x-code-preview>

## Layout toaster

Mount once near the root of your app (teleports to `body`):

```blade
<x-slate::toaster position="bottom-end" />
```

Then fire toasts from anywhere:

```js
window.dispatchEvent(new CustomEvent('slate-toast', {
  detail: {
    title: 'Copied',
    description: 'Link copied to clipboard.',
  }
}))
```

Or with Alpine:

```blade
<x-slate::button @click="$dispatch('slate-toast', { title: 'Saved' })">
    Save
</x-slate::button>
```

## Static toast

Compose a toast card without the viewport:

<x-code-preview>
@verbatim
<x-slate::toast
    title="Invite sent"
    description="We've emailed your teammates a join link."
/>
@endverbatim
</x-code-preview>

## Composition

```
Toaster (layout, once)
└── Toast stack (Alpine)

Toast
├── ToastTitle
├── ToastDescription
├── ToastAction
└── ToastClose
```

## API

### Toaster

| Prop | Default | Notes |
|------|---------|-------|
| `position` | `bottom-end` | `top-start`, `top-center`, `top-end`, `bottom-start`, `bottom-center`, `bottom-end` |
| `duration` | `4000` | Auto-dismiss ms; `0` keeps until closed |

### Event payload (`slate-toast`)

| Field | Notes |
|-------|-------|
| `title` | Bold heading |
| `description` | Supporting text |
| `variant` | `default` \| `destructive` \| `success` \| `warning` \| `info` |
| `duration` | Overrides toaster default |

## Related

- [Alert](/components/alert)
- [Alert Dialog](/components/alert-dialog)