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.
195+ 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 195+ 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).
Optimistic UI lets a control show the result before the server has confirmed it. If the answer is no, a toggle or a select puts the old value back, while a field you typed into keeps your text and marks it unsaved — restoring it would delete your work. Either way it is announced once as provisional, silent when it is confirmed, and speaking a second time only when something actually deviated. See how it announces itself(opens in new tab).
The layout most admin interfaces actually use — a sidebar running the full height with the topbar starting beside it — is now something the library expresses rather than something you rebuild around it. A collapse button in your own topbar can drive a sidebar it does not contain, and reports the right state from its first paint. See the sidebar component(opens in new tab).
The frame around an application is now the library's to build, not each project's to assemble: the module rail down its side, the bar that draws one line across every column instead of several that nearly meet, and the switcher that says which workspace you are in — a list with a current member rather than a menu of commands, which is what lets a screen reader name the one you are on. See the app rail(opens in new tab), shell bar(opens in new tab) and scope switcher(opens in new tab), which compose the application shell(opens in new tab).
A dialog is above the page because the stylesheet you already load says so — not because your build happened to scan the right directory. When that scan came up short, the confirmation for a destructive action opened somewhere down the document with its confirm button below the fold, and the click did nothing at all: no error, no feedback, just a button out of reach. What a component library ships has to work without being generated first. See the alert dialog(opens in new tab), modal(opens in new tab) and drawer(opens in new tab).
A flow with steps, a column that chooses rather than
navigates, and a dialog that will not accept the wrong
word — each one was the application's job right up until
it was the library's. The step indicator knew where you
were and owned none of it; a selecting column announced
itself as navigation, which is a different promise to a
screen reader than the one it was keeping; and the brake
before a destructive action was either missing or built
beside the dialog it belongs to. See the
wizard(opens in new tab),
sidebar(opens in new tab) and
alert dialog(opens in new tab).
A card(opens in new tab) can also stop clipping the panel meant to lift out of it,
which until now cost an !important in your own stylesheet.
A table cell could be a word, a figure or a status pill, and an admin table is made of more than those. A stock count that reads red at zero and amber under ten, a face beside a name, a row of segment tags where how many is data, a column of order references that has to line up character by character — each of those used to be built around the table rather than with it. They are column configuration now, because the body is drawn in the browser and there is no per-row template to hand back. See the data table(opens in new tab) and data list(opens in new tab).
Text inside a closed disclosure is text your reader cannot search. The ten answers further down this page are collapsed, and the browser's own find in page reaches every word of them anyway — a match inside a closed one opens it. Until now the answer somebody came for was simply absent from the search, which is the kind of defect nobody reports because it looks like the page not having an answer. See the accordion(opens in new tab).
A panel that snaps open moves every word below it in a single frame, and the reader loses the line they were on. The ten answers further down ease open and shut instead, over the same duration token the rest of the page animates on — and not at all for a reader whose system asks for less motion. The library's other disclosure had done this all along; the accordion is the one that caught up. See the collapsible(opens in new tab) and accordion(opens in new tab).
A build that scans a whole component library carries the styles of every component in it, whether a page draws them or not. Each component now ships a Tailwind source of its own, so a build can scan only the ones your views actually use, and the doctor command names any component a view starts using that the list leaves out. This page's own stylesheet is built that way. See scanning only the components you use(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.
195+ 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.
new Function, which Alpine uses to evaluate its expressions — and when it is blocked nothing throws: components simply stop responding, which is the hard part to diagnose. WireKit's own bundle contains no new Function and no eval at all, so the question is only where your Alpine comes from. If it comes from Livewire, use Livewire's CSP distribution and keep loading WireKit as usual. If you bring your own Alpine, set the script bundle to csp and WireKit loads a build that carries Alpine's Content-Security-Policy distribution with it — that build deliberately stands down when it finds an Alpine already on the page, so it is the one to pick when nothing else supplies one, not an extra layer on top.
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, form-validation errors announce themselves to screen readers, and every component honors a reduced-motion preference — 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.