包简介

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

README 文档

README

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, 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

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
CLI reference	docs.wirekit.app/cli
Contribution guide	CONTRIBUTING.md
Changelog	docs.wirekit.app/changelog · CHANGELOG.md

License

MIT — see LICENSE for details.

pushery/wirekit 适用场景与选型建议

pushery/wirekit 是一款基于 Blade 开发的 Composer 扩展包，目前已累计 501 次下载、GitHub Stars 达 3，最近一次更新时间为 2026 年 03 月 31 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「components」「laravel」「blade」「ui-kit」「tailwindcss」「livewire」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 pushery/wirekit 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 pushery/wirekit 我们能提供哪些服务？

定制开发 / 二次开发

基于 pushery/wirekit 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 pushery/wirekit 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

components/webfontloader 2

Web Font Loader gives you added control when using linked fonts via @font-face.

arc/xml 27

Ariadne Component Library: xml writer and parser Component

arc/cache 1

Ariadne Component Library: Cache Component

arc/config 0

Ariadne Component Library: hierarchical configuration management Component

arc/grants 1

Ariadne Component Library: user and group rights management Component

arc/events 0

Ariadne Component Library: W3C style events Component

pushery/wirekit

包简介

关键字：