pushery/wirekit

WireKit

A free, open-source UI component library for Laravel Livewire — build app dashboards and marketing pages with Tailwind CSS v4 and Alpine.js, zero utility-class soup.

A comprehensive component library covering forms, navigation, overlays, layout, marketing, data display, and more — fully themeable, accessible by default (built and tested to WCAG 2.2 AA), and dark-mode aware.

→ Full documentation: docs.wirekit.app

Requirements

• PHP 8.4+
• Laravel 12+/13+
• Livewire 4+
• Tailwind CSS v4
• Alpine.js, which Livewire 4 ships with (nothing to install)

Browser Support

WireKit's supported-browser baseline is pinned to Tailwind CSS v4's official requirements — whenever Tailwind raises its baseline, WireKit follows in the same release.

Older browsers are out of scope: WireKit ships no polyfills, no vendor-prefix fallbacks, and no shims for dropped browsers.

Installation

# 1. The library, plus the icon renderer and the Heroicons set its components draw with
composer require pushery/wirekit blade-ui-kit/blade-icons blade-ui-kit/blade-heroicons

# 2. Publish the config and assets, add WireKit's templates to your Tailwind sources,
#    and write the directives into your layout
php artisan wirekit:install

The installer adds this line to resources/css/app.css, so Tailwind compiles the classes WireKit's templates use:

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

It also writes the two directives into your layout, and creates one with Livewire's livewire:layout if there is none. @wirekitScripts goes before @livewireScripts, so WireKit's components are registered before Livewire starts Alpine:

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

    @wirekitScripts
    @livewireScripts
</body>

Full setup walkthrough: Getting Started · Integration Guide

Quick Start

<x-wirekit::button>Save</x-wirekit::button>
<x-wirekit::button intent="danger">Delete</x-wirekit::button>

<x-wirekit::input label="Email" type="email" name="email" wire:model="email" />

<x-wirekit::select
    label="Role"
    name="role"
    :options="['admin' => 'Admin', 'user' => 'User']"
/>

<x-wirekit::textarea label="Bio" name="bio" wire:model="bio" />

What's Included

A wide catalog of components organized by category. Browse, search, and try every component live on docs.wirekit.app.

Theming & Customization

WireKit ships with a 4-level customization system — from CSS-variable theme tokens to fully published Blade views. Every component reads from --color-wk-* design tokens with built-in dark-mode support.

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

Keep the override in a plain :root {} block. WireKit's defaults are unlayered, so an override inside @layer base or @theme loses to them and has no effect.

→ Theming Guide · Customization Guide

Optional Integrations

• Fonts — Curated Google Fonts bundled locally for GDPR compliance. Configure via config/wirekit.php.
• Icons — Stackable presets for heroicons, lucide, phosphor, tabler plus app/marketing extensions, with semantic aliases for common UI intents.
• Optimistic UI — An opt-in bundle that shows an action's result before the server has confirmed it, then confirms silently or undoes itself audibly. Add optimistic="yourMethod" to a supported component and load wirekit-optimistic.js. Components that don't use it render byte-identically and pay nothing. See Optimistic UI.
• Charts — Optional chart system with a Chart.js (MIT) adapter and an ApexCharts adapter. Switch the app default with one line: 'charts' => ['library' => 'apexcharts'] in config/wirekit.php, or override per-instance via <x-wirekit-chart library="apexcharts" …> for mixed-library pages. ApexCharts is non-MIT (free Community License under $2M USD revenue, Commercial License above) — WireKit ships only the adapter glue. See Chart docs for the full terms.

→ Theming Guide for fonts and presets · Icon docs · Chart docs

Using WireKit with AI assistants

WireKit ships first-class context for AI coding assistants so they author correct markup instead of guessing at props. From your project root:

• php artisan wirekit:list — every component, grouped by category
• php artisan wirekit:show <component> — props, slots, sub-components, docs URL
• php artisan wirekit:icons — every icon alias, grouped by preset
• php artisan wirekit:export-json --pretty — the full machine-readable manifest

wirekit:install also writes a .wirekit-schema.json to your project root for zero-configuration autocomplete. A tool-neutral AGENTS.md and a .cursor/rules/wirekit.mdc rule file (publish with php artisan wirekit:cursor-rules) ship with the package, and an MCP server exposes the same catalog as live editor tools.

→ AI tooling guide

Documentation

License

MIT — see LICENSE for details.