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, and dark-mode aware.
→ Full documentation: docs.wirekit.app
Requirements
- PHP 8.4+
- Laravel 12+
- 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 variant="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, image-compare, kanban, stage-card, activity-row, reveal, … |
| Data Display | table, data-table, status-matrix, notification-center, pagination, stat, stats, progress, usage-meter, skeleton, spinner, timeline, tree-view, ticker, price, … |
| Overlays | dropdown, tooltip, modal, drawer, popover, hover-card, command-palette, alert-dialog, … |
| Navigation | tabs, breadcrumb, accordion, collapsible, sidebar, navbar, brand-bar, menubar, navigation-menu, stepper, … |
| Layout | app-shell, 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,tablerplus app/marketing extensions, with semantic aliases for common UI intents. - Charts — Optional chart system with a Chart.js (MIT) adapter and an ApexCharts adapter. Switch the app default with one line:
'charts' => ['library' => 'apexcharts']inconfig/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
Documentation
| Resource | Where |
|---|---|
| Full documentation | docs.wirekit.app |
| Getting started | docs.wirekit.app/getting-started |
| Theming | docs.wirekit.app/theming |
| CLI reference | docs.wirekit.app/cli |
| Contribution guide | CONTRIBUTING.md |
| Release history | CHANGELOG.md |
License
MIT — see LICENSE for details.