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, and dark-mode aware.

→ Full documentation: docs.wirekit.app

Requirements

PHP 8.4+
Laravel 12+/13+
Livewire 4+
Tailwind CSS v4
Alpine.js

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.

Browser	Minimum version	Released
Chrome	111	March 2023
Edge	111	March 2023 (Chromium-based)
Safari	16.4	March 2023
Firefox	128	July 2024

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

Installation

composer require pushery/wirekit

Add the directives to your layout:

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

Add WireKit's Blade source path to your resources/css/app.css:

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

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.

Category	Examples
Forms	button, input, select, textarea, editor, combobox, multi-select, date-picker, slider, color-picker, otp-input, filter-builder, …
Display	badge, card, avatar, alert, callout, countdown, image, image-gallery, image-compare, kanban, stage-card, activity-row, reveal, stream, …
Data Display	table, data-table, status-matrix, status-tiles, notification-center, pagination, stat, stats, progress, radial-progress, usage-meter, skeleton, spinner, timeline, tree-view, ticker, price, …
Overlays	dropdown, tooltip, modal, drawer, popover, hover-card, lightbox, command-palette, alert-dialog, …
Navigation	tabs, breadcrumb, scope-switcher, accordion, collapsible, sidebar, app-rail, navbar, brand-bar, menubar, navigation-menu, stepper, wizard, …
Layout	app-shell, shell-bar, header, main, footer, container, stack, grid, section, divider, sticky-panel, skip-link, spine-aware, …
Typography	heading, text, link, code, code-block, kbd, list, blockquote, mark, …
Marketing	hero, feature-grid, feature, cta
Utilities	fonts, icon, chart, chart-mixed, map, sparkline, scroll-area, scroll-to-top, structured-data
Specialized	resizable, carousel, calendar, event-calendar, tour, qr-code, action-bar, prose, glass
Reading	reading-progress, reading-spine, reading-toc, reading-minimap, reading-bookmark, reading-meta, reading-shell
Animation	reveal, replay-button
Feedback	toast-region

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.

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

→ 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

Resource	Where
Full documentation	docs.wirekit.app
Getting started	docs.wirekit.app/getting-started
Theming	docs.wirekit.app/theming
Localization	docs.wirekit.app/localization
CLI reference	docs.wirekit.app/cli-reference
Contribution guide	CONTRIBUTING.md
Changelog	docs.wirekit.app/changelog · CHANGELOG.md

License

MIT — see LICENSE for details.

pushery/wirekit

Development

Runtime