UI components for Laravel Livewire.
A free, open-source component library for the TALL stack — styled with Tailwind CSS v4, powered by Alpine.js and wired straight into Laravel Livewire.
composer require pushery/wirekit
php artisan wirekit:install
# then drop components into any Blade file
# <x-wirekit::button>Ship it</x-wirekit::button>What is WireKit?
A complete Blade component set — from button to data table.
WireKit covers the full surface of a modern admin or product UI: buttons, inputs and fields through modals, drawers and command palettes, all the way to date pickers, charts and data tables. Every component follows a single design-token system and can be themed end-to-end with CSS variables.
The library is deliberately minimal: no custom frameworks, no new syntax. What you already know — Blade, Tailwind, Alpine, Livewire — is enough to build production-grade interfaces.
Why WireKit
Everything you need. Nothing you don't.
Native TALL integration
Every component is a real Blade template — compatible with
wire:model,
wire:click and Livewire events.
No wrappers, no trade-offs.
Installed in minutes
composer require pushery/wirekit,
run wirekit:install, done.
No Webpack config, no SPA build pipeline — just
Composer + npm + Tailwind v4 + Vite, the
same toolchain a fresh laravel new already ships with.
Design tokens, not hard-codes
Colors, radii, spacing and typography all flow through CSS variables.
A single :root override and the
whole UI wears your brand — dark mode included.
173+ components
Forms, navigation, overlays, data display, feedback, charts, kanban boards, chat threads — everything a modern admin or product UI needs, ready out of the box.
WCAG 2.2 AA — verified, then linted
Every text-on-surface, button-label and semantic-message pair is
calibrated for ≥4.5:1 contrast in light and dark mode.
v2.3.0 ships wirekit:doctor:a11y,
a static-analysis linter that scans your Blade for icon-only buttons
without aria-label, dialogs without
an accessible name, and role="img" without a label. Wire it into CI alongside
wirekit:verify.
MIT core, no paywall
No paywall, no pro edition. WireKit is MIT-licensed for hobby projects, startups and agencies alike. The one caveat: enabling the optional ApexCharts adapter pulls in ApexCharts itself, which is non-MIT (free under $2M USD revenue, Commercial above). The default Chart.js adapter stays fully MIT.
See it in the docs
Try the components, not just the pitch
Every one of the 173+ components ships with live, interactive examples — plus copy-paste blueprints for entire page sections.
Flip the theme switcher in the docs — one preset recolors the entire library on the spot. That's WireKit theming: presets only, no rebuild.
Building with an AI editor? WireKit speaks MCP — a local server your assistant queries for real prop signatures and design tokens, so it stops guessing. Set it up from the AI-tooling guide(opens in new tab).
And this landing page? Built end-to-end with WireKit, too.
Why WireKit — not something else?
Server-side by design. No SPA. MIT core, no paywall.
WireKit is a Composer package of Blade components, design tokens and small Alpine plugins for Laravel 12+, Livewire 4 and Tailwind CSS v4. The whole library is MIT — every component, no per-seat license, no "Pro tier" gate. Install it, ship it, commercial or not.
173+ server-rendered components — forms, overlays, navigation, tables, command palettes, charts. No SPA runtime: you write Blade and Livewire, the server returns HTML. A small Alpine bundle handles the interactive bits (modals, dropdowns, focus management) and that's the entire client-side surface. The payoff is concrete — less build complexity, SEO out of the box, and a stack you debug with plain DevTools.
Dark mode, accessibility and keyboard navigation are built into every component. Theme it with one Tailwind variable or customize all the way down to the markup. Drops into any Laravel 12+ app — fresh, existing, or a Jetstream / Breeze starter.
FAQ
Frequently asked questions
Everything you need to know before you
composer require it.
composer require pushery/wirekit, then php artisan wirekit:install. The installer wires up the published assets, the Tailwind sources and the config file. From there you compose WireKit components directly in any Blade view.
:root block re-skins the whole UI — dark mode included. WireKit also ships eight theme presets (this very site runs the brand-magenta Aurora preset), and a single --theme-hue variable retints an entire palette in one line.
wirekit:doctor:a11y — a static-analysis linter that scans your Blade for missing labels and other WCAG issues so you can wire it into CI. The defaults do the right thing on their own: navigation landmarks take overridable accessible names, headings follow the surrounding document outline, and form-validation errors announce themselves to screen readers — no opt-in required.
docs.wirekit.app/components.json (every component, prop, slot and category) and docs.wirekit.app/llms.txt for LLM onboarding — and appending .md to a component or guide URL returns that page's raw Markdown for context. Ready-made blueprints and layout blocks are browsable at docs.wirekit.app/blueprints. Locally, wirekit:mcp-serve runs a first-party Model Context Protocol server (JSON-RPC over stdio) so your editor queries the live catalog for real prop signatures and tokens, wirekit:boost-skills publishes a Laravel Boost manifest, and a tool-neutral AGENTS.md points any assistant at the discovery commands; wirekit:export-api-map and wirekit:export-json emit the same maps for other MCP servers and agents, wirekit:cursor-rules writes a native Cursor rules file to .cursor/rules/, and wirekit:doctor:a11y is a static-analysis linter an agent can run in CI to catch accessibility issues it might introduce.
Ready to try it?
The docs walk you from installation to your first custom component, step by step.
Or jump straight into the source on GitHub.