pushery/wirekit

A free, open-source UI component library for Laravel Livewire — styled with Tailwind CSS v4 and powered by Alpine.js.

Maintainers

👁 pushery

Package info

github.com/pushery/wirekit

Language:Blade

pkg:composer/pushery/wirekit

Statistics

Installs: 385

Dependents: 0

Suggesters: 1

Stars: 3

Open Issues: 0

v2.8.1 2026-06-25 09:01 UTC

Requires

Suggests

Provides

None

Conflicts

None

Replaces

None

README

👁 WireKit

WireKit

👁 Latest Version on Packagist
👁 License: MIT
👁 Components

👁 PHP ≥ 8.4
👁 Laravel 12+
👁 Livewire 4+
👁 Tailwind CSS v4
👁 Alpine.js

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, tabler plus 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'] 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

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
Changelog docs.wirekit.app/changelog · CHANGELOG.md

License

MIT — see LICENSE for details.