Download the PHP package pushery/wirekit without Composer

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

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

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:

Full setup walkthrough: Getting Started · Integration Guide

Quick Start

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.

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.