Getting Started

Minimal Setup

Installation:
```
composer require pushery/wirekit
```

Add to Blade Layout:

<head>
    @wirekitStyles
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    {{ $slot }}
    @wirekitScripts
</body>

Import Blade Components in resources/css/app.css:

@source '../../vendor/pushery/wirekit/resources/views/**/*.blade.php';

Verify Installation:
```
php artisan wirekit:verify
```

First Use Case

Replace a basic Livewire form with WireKit components:

<x-wirekit::form wire:submit="save">
    <x-wirekit::field label="Email" name="email">
        <x-wirekit::input type="email" wire:model="email" />
    </x-wirekit::field>
    <x-wirekit::button type="submit" intent="primary">Save</x-wirekit::button>
</x-wirekit::form>

Implementation Patterns

Component Organization

Categorical Usage:
- Forms: <x-wirekit::input>, <x-wirekit::select>, <x-wirekit::button>
- Layout: <x-wirekit::container>, <x-wirekit::grid>, <x-wirekit::section>
- Overlays: <x-wirekit::modal>, <x-wirekit::dropdown>, <x-wirekit::alert-dialog>
- Data Display: <x-wirekit::table>, <x-wirekit::card>, <x-wirekit::stat>

Slot-Based Composition:

<x-wirekit::card>
    <x-slot:header>
        <x-wirekit::heading>Title</x-wirekit::heading>
    </x-slot:header>
    <x-slot:body>
        <x-wirekit::text>Content</x-wirekit::text>
    </x-slot:body>
</x-wirekit::card>

Livewire Integration:

Use wire:model on form inputs:

<x-wirekit::input wire:model="email" />

For complex components like <x-wirekit::range-slider>, declare array properties:

public array $priceRange = ['min' => 20, 'max' => 80];

<x-wirekit::range-slider wire:model="priceRange" />

Theming: Override CSS variables in app.css:

@layer base {
    :root {
        --color-wk-accent: var(--color-blue-600);
    }
}

CLI Workflows:

Scaffold a Livewire Page:

php artisan wirekit:make page:dashboard

Generate a Component:

php artisan wirekit:component my-button --base=button

Export Component Schema (for AI tooling):
```
php artisan wirekit:export-json
```

Gotchas and Tips

Common Pitfalls

Orphaned Overlay Triggers:
- Issue: Placing <x-wirekit::modal.trigger> outside <x-wirekit::modal> causes silent failures.
- Fix: Always nest triggers inside their parent overlay:
```
<x-wirekit::modal>
    <x-slot:trigger>
        <x-wirekit::button>Open</x-wirekit::button>
    </x-slot:trigger>
</x-wirekit::modal>
```
Livewire Model Binding:
- Issue: <x-wirekit::range-slider> requires array properties for wire:model (e.g., $priceRange = ['min' => X, 'max' => Y]).
- Fix: Declare the property as an array in your Livewire class.
Dark Mode:
- Issue: Manually applying dark: classes to WireKit components breaks auto-switching.
- Fix: Rely on parent .dark class; avoid dark: prefixes.
Icon Usage:
- Issue: Using class="h-N w-N" on <x-wirekit::icon> overrides the size prop.
- Fix: Use size="sm|md|lg|xl" props instead.
Chart Re-rendering:
- Issue: <x-wirekit::chart> re-creates instances on every data change, causing flickering.
- Fix: Use $wire->set() for updates and debounce triggers:
```
$this->dispatch('chart-update', data: $newData)->unless($this->chartData === $newData);
```

Debugging Tips

Verify Installation:
```
php artisan wirekit:verify
```
- Checks for missing @wirekitStyles/@wirekitScripts and Blade source paths.
Inspect Components:
```
php artisan wirekit:show button
```
- Lists props, slots, and docs URL for any component.
Component List:
```
php artisan wirekit:list
```
- Browse all available components.
Schema Export:
```
php artisan wirekit:export-json
```
- Generate machine-readable manifests for AI tooling.

Extension Points

Custom Components: Fork existing components:
```
php artisan wirekit:component my-custom-button --base=button
```
- Modify the generated file in resources/views/vendor/wirekit/.
Theming Presets: Apply pre-built themes:
```
php artisan wirekit:theme cupertino
```

Icon Presets: Publish additional icon sets:

php artisan wirekit:publish-icons lucide --force

Liquid Glass Extension: Enable experimental glassmorphism effects:
```
php artisan wirekit:glass install
```
Recipes: Scaffold complex layouts:
```
php artisan wirekit:make recipe:marketing-landing-page
```
- Generates a Livewire class + Blade view from documented patterns.

Wirekit Laravel Package