=== wireui/core rules ===

## WireUI

- This project uses WireUI, a TALL stack component library built with Alpine.js and Tailwind CSS.
- WireUI provides pre-made Blade components for rapid project delivery with design flexibility and seamless compatibility with Livewire.
- You should use WireUI components when available.
- Fallback to standard Blade components if WireUI is unavailable.
- Official documentation: https://wireui.dev/
- WireUI components use the `x-` prefix for Blade components:

### Documentation Access
- **IMPORTANT**: Laravel Boost's `search-docs` tool does NOT support WireUI documentation.
- **Context7 MCP Server** is configured to provide WireUI documentation access via the `ReadMcpResourceTool`.
- WireUI documentation is indexed in Context7 with 584 tokens and 8 code snippets (last updated 5 months ago).
- To access WireUI documentation:
  1. Use `ListMcpResourcesTool` with `server: "context7"` to see available resources
  2. Use `ReadMcpResourceTool` with `server: "context7"` and `uri: "wireui://wireui"` to fetch documentation
- **Fallback**: If Context7 is unavailable, use the `WebFetch` tool to retrieve information from https://wireui.dev/
- Common documentation URLs:
  - Components overview: https://wireui.dev/components
  - Specific components: https://wireui.dev/components/{component-name} (e.g., https://wireui.dev/components/button)
  - Getting started: https://wireui.dev/get-started

<code-snippet name="WireUI Component Usage Example" lang="blade">
    <x-button primary label="Save" />
    <x-input label="Name" placeholder="Your name" wire:model="name" />
</code-snippet>

### Installation
- Install via Composer: `composer require wireui/wireui`
- WireUI integrates seamlessly with Livewire and Alpine.js

### Available Components
This is correct as of installation, but there may be additional components within the codebase.

#### UI Components
<available-wireui-ui-components>
alert, avatar, badge, button, card, dropdown, icon, link, modal, table
</available-wireui-ui-components>

#### Form Components
<available-wireui-form-components>
checkbox, color-picker, currency, datetime-picker, errors, input, maskable, native-select, number, password, phone, radio, select, textarea, time-picker, toggle
</available-wireui-form-components>

### Common Usage Patterns

<code-snippet name="WireUI Button Variants" lang="blade">
    <x-button primary label="Primary" />
    <x-button secondary label="Secondary" />
    <x-button positive label="Success" />
    <x-button negative label="Danger" />
    <x-button flat label="Flat" />
</code-snippet>

<code-snippet name="WireUI Input Components" lang="blade">
    <x-input label="Email" placeholder="[email protected]" wire:model="email" />
    <x-datetime-picker label="Appointment Date" wire:model="date" />
    <x-select label="Country" wire:model="country" :options="$countries" />
    <x-toggle label="Subscribe to newsletter" wire:model="subscribe" />
</code-snippet>

<code-snippet name="WireUI Notifications" lang="php">
    // In your Livewire component
    $this->notification()->success(
        $title = 'Profile saved!',
        $description = 'Your profile was successfully updated.'
    );
</code-snippet>

### Key Features
- **Heroicons Integration**: 450+ free SVG icons available via `<x-icon name="icon-name" />`
- **Notifications**: Built-in notification system for alerts and confirmations
- **Form Validation**: Seamless integration with Laravel validation and Livewire
- **Dark Mode**: Support for dark mode variants
- **Customization**: All components support Tailwind CSS classes for customization