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

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)

JavaScript Dependencies (Bundled)

These are bundled inside dist/wirekit.js — no npm install needed by the user. They are pre-compiled and included in the package distribution.

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 is not one seventy-eighth of the whole.

Choose your bundle in config/wirekit.php:

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

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 contain license headers listing the bundled dependencies and their licenses. This ensures compliance even when the source files are not distributed.

Example header in dist/wirekit.js:

/*! WireKit v0.2.0 | MIT License | https://wirekit.app
 * Bundled: @floating-ui/dom ^1.7.0 (MIT), @floating-ui/core ^1.7.0 (MIT),
 *          focus-trap ^8.0.0 (MIT), tabbable ^6.0.0 (MIT) */