Dependencies

WireKit is transparent about every dependency it uses. All bundled dependencies are MIT-licensed.

PHP Dependencies (via Composer)

Runtime Requirements

• PHP ^8.4
• Laravel ^12.0 || ^13.0

Required Packages

Front-end Toolchain (you must install these in your app)

WireKit's components emit Tailwind utility classes and Alpine.js directives. Your application is responsible for the JS / CSS toolchain that processes them:

Optional (via suggest)

The rows say how each package is packaged rather than how large it is. A file is a glyph in some of these catalogs and one style of a glyph in others, so the two numbers are not comparable — and every catalog grows on its own upstream release schedule, which this library does not pin. For a current size, read the preset you are considering at its source.

JavaScript Dependencies (Bundled)

These are compiled into dist/wirekit.js and the bundles built from the same sources (wirekit.esm.js, wirekit-alpine.js, wirekit-alpine.csp.js) — no npm install needed by the user. They are pre-compiled and included in the package distribution.

The two self-contained bundles additionally carry the Alpine they start: wirekit-alpine.js bundles alpinejs, and wirekit-alpine.csp.js bundles @alpinejs/csp (both MIT).

No version column, deliberately: a range written here says what was permitted when the table was last edited, and it drifted away from what npm installs. Every bundle's own license header names each package at the exact version it was compiled at, and that header is generated from the packages themselves — so it cannot say something the file does not contain.

Stylesheet

WireKit ships one stylesheet in two forms. @wirekitStyles links the minified one; the readable one is published beside it so you can read what a token means and where it is used.

JavaScript Bundles

WireKit ships several pre-built JavaScript bundles:

The ESM bundle is for manual import in your own build pipeline (e.g. Vite). It is not selectable via the config — use import in your JavaScript instead.

Importing only the components you use

Importing the default export registers every component, which is the right trade when you render most of them:

// 1. The whole library — every component available, one line of setup.
import WireKit from '../../vendor/pushery/wirekit/dist/wirekit.esm.js';

Alpine.plugin(WireKit);

If your application only renders a handful, import those by name and hand them to register() instead. Your bundler drops everything you did not name:

// 1. `register` installs the shared runtime; the rest are the components you want.
//    The names are the same ones the Blade components emit into `x-data`.
import {
    register,
    wirekitDropdown,
    wirekitModal,
    wirekitTooltip,
} from '../../vendor/pushery/wirekit/dist/wirekit.esm.js';

// 2. Register just those three. Anything not passed here is never referenced,
//    so your bundler removes it from the output entirely.
Alpine.plugin((Alpine) => register(Alpine, { wirekitDropdown, wirekitModal, wirekitTooltip }));

Measured with esbuild (--bundle --minify --format=esm), for an application that imports and uses the result:

The shared runtime — overlay positioning, the teleport root and the collapse plugin — is included in every figure above, which is why one component costs far more than the whole divided by the number of components.

Choose your bundle in config/wirekit.php:

'scripts' => [
    'bundle' => 'full', // 'full', 'core' or 'csp'
],

User-Installed Dependencies

These are not bundled — install them separately if you need them:

Wiring a syntax highlighter (optional)

<x-wirekit::code-block language="php"> emits <code data-language="php">. Three common highlighters work out of the box:

// resources/js/app.js — highlight.js example
import hljs from 'highlight.js/lib/core';
import php from 'highlight.js/lib/languages/php';
import 'highlight.js/styles/github-dark.css';
hljs.registerLanguage('php', php);
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('code[data-language]').forEach((el) => hljs.highlightElement(el));
});

Same pattern for Prism.js (Prism.highlightAllUnder(document.body)) and Shiki (server-side highlighting via the Shiki API).

License Headers

All bundled JavaScript files open with a license header naming every third-party package compiled into that file, at the exact version it was compiled at, with its license. This ensures compliance even when the source files are not distributed.

The header is generated at build time and reads back what is actually installed, so it describes the file you are holding rather than the range that was permitted when it was built. It takes this shape:

/*! WireKit v<version> | MIT License | https://wirekit.app
 * Bundled:
 *   <package> <version> (<license>)
 *   … one line per package …
 */

The list differs per bundle — wirekit.core.js carries no third-party code at all and so carries no Bundled: block, while wirekit-alpine.js and wirekit-alpine.csp.js additionally name the Alpine distribution they bundle. Read the first lines of the file itself for the authoritative list:

head -12 vendor/pushery/wirekit/dist/wirekit.js