---
title: Dependencies
description: Required and optional dependencies — PHP, Laravel, Livewire, Tailwind CSS, Alpine, blade-icons, Chart.js, bacon-qr-code
visibility: guest
draft: false
---

# 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

| Package | Version | License | Purpose |
| --- | --- | --- | --- |
| `illuminate/contracts` | ^12.0 \|\| ^13.0 | MIT | Laravel contracts |
| `illuminate/support` | ^12.0 \|\| ^13.0 | MIT | Laravel support utilities |
| `illuminate/view` | ^12.0 \|\| ^13.0 | MIT | Blade rendering |
| `livewire/livewire` | ^4.0 | MIT | Livewire component runtime — required for interactive components. Livewire v4 also bundles Alpine.js, so a separate Alpine install is NOT needed |

### 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:

| Package | Install | Why |
| --- | --- | --- |
| `tailwindcss` (v4) | `npm install tailwindcss @tailwindcss/vite` | Required — components use Tailwind utility classes. The `@tailwindcss/vite` plugin must be registered in `vite.config.js` |
| `alpinejs` | Already bundled by Livewire v4 (no install) | Required — components use `x-data` / `x-bind` / `x-on`. If you're on Livewire v3 or no Livewire, install via `npm install alpinejs` and add `import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start();` to `resources/js/app.js` |

### Optional (via `suggest`)

| Package | License | Purpose |
| --- | --- | --- |
| `blade-ui-kit/blade-icons` | MIT | Icon rendering engine (required for icon system) |
| `blade-ui-kit/blade-heroicons` | MIT | Icon preset: Heroicons Mini (~316 icons) |
| `mallardduck/blade-lucide-icons` | MIT | Icon preset: Lucide (~1,500 icons) |
| `codeat3/blade-phosphor-icons` | MIT | Icon preset: Phosphor (~9,000 icons) |
| `secondnetwork/blade-tabler-icons` | MIT | Icon preset: Tabler (~7,200 icons) |

## 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.

| Package | Version | License | Purpose | Size (gzip) |
| --- | --- | --- | --- | --- |
| `@floating-ui/dom` | ^1.7.0 | MIT | Dropdown/Tooltip positioning | ~3.5 KB |
| `@floating-ui/core` | ^1.7.0 | MIT | Positioning core (transitive) | ~2.5 KB |
| `focus-trap` | ^8.0.0 | MIT | Modal/Drawer focus management | ~3.8 KB |
| `tabbable` | ^6.0.0 | MIT | Focusable element detection (transitive) | ~1.5 KB |

::: info
`dist/wirekit.core.js` contains **no external dependencies** — it only includes the chart Alpine component. Use the core bundle if you don't need overlay components (Dropdown, Tooltip, Modal, Drawer).
:::

## 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.

| Bundle | File | Contains | Size |
| --- | --- | --- | --- |
| **Stylesheet** | `dist/wirekit.min.css` | Every design token, component class and keyframe — the file `@wirekitStyles` links | ~13 KB gzip (74 KB raw) |
| **Stylesheet (readable)** | `dist/wirekit.css` | The same rules, fully commented. Published for reading, never linked — the comments are two thirds of the file, so it is several times the minified one and grows whenever a rule gains an explanation. | not size-tracked — see `dist/README.md` for the current figure |

::: info The comments are the design system's documentation
The readable file explains why each token has the value it has, and the minified one is
generated from it, so the two always agree. Only the minified one is on the critical path,
and it is render-blocking — the difference is 64 KB gzip on every uncached page-view.
:::

## JavaScript Bundles

WireKit ships several pre-built JavaScript bundles:

| Bundle | File | Contains | Size |
| --- | --- | --- | --- |
| **Full** | `dist/wirekit.js` | All Alpine components + Floating UI (incl. size middleware) + focus-trap + animation helper + reading-spine + reading-minimap (stripes + rendered modes + hover-preview/bookmark/heading-anchor/idle-fade extensions) + chart wireStream/annotations | ~68 KB gzip (240 KB raw) |
| **Core** | `dist/wirekit.core.js` | Chart Alpine component only | ~4 KB gzip (13 KB raw) |
| **ESM** | `dist/wirekit.esm.js` | Every component as an ES module, each exported by name so your bundler can drop the ones you never render. The size on the right is all of them; one component is about 10 KB gzip — see [Importing only the components you use](#importing-only-the-components-you-use) | ~68 KB gzip (241 KB raw) |
| **ApexCharts adapter** | `dist/wirekit-apex.js` | Optional opt-in: `wirekitApexChart` Alpine factory only — does NOT bundle ApexCharts itself; you install `apexcharts` via npm (see [User-Installed Dependencies](#user-installed-dependencies) below). ApexCharts is non-MIT — see [Chart docs](components/chart.md#license-apexcharts-only) for terms. | ~7 KB gzip (21 KB raw) |
| **Tiptap editor adapter** | `dist/wirekit-tiptap.js` | Optional opt-in: `wirekitEditor` Alpine factory only — pairs with the **Core** bundle so you can add the rich-text `<x-wirekit::editor>` without loading the **Full** overlay bundle. Does NOT bundle Tiptap itself; you install `@tiptap/core` + `@tiptap/starter-kit` via npm and expose a `window.tiptapEditor(config)` factory (see [Editor docs](components/editor.md)). The editor is ALSO in the **Full** bundle — load this ONLY alongside **Core**. | ~3 KB gzip (7 KB raw) |
| **Optimistic UI** | `dist/wirekit-optimistic.js` | Optional opt-in: the `wirekitOptimistic` Alpine factory only — shows the result of an action before the server has confirmed it, then confirms or rolls back. Deliberately absent from the **Full** bundle: loading it is how you accept its announcement behavior, so applications that do not use it pay nothing. Load it alongside whichever bundle you already use. | ~3 KB gzip (8 KB raw) |

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:

```javascript
// 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:

```javascript
// 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:

| What you import | Raw | Gzip |
| --- | --- | --- |
| The default export (every component) | 235 KB | 66 KB |
| Five components via `register()` | 54 KB | 18 KB |
| One component via `register()` | 26 KB | 10 KB |

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.

::: warning Your bundler has to be doing the dropping
These numbers **require** a bundler with tree-shaking enabled — the default in Vite,
Rollup and esbuild production builds. Load `dist/wirekit.esm.js` directly in the browser
with a plain `<script type="module">` and nothing is dropped: you download all of it,
silently, with no warning from anything. Use the **Full** bundle for that case instead.
:::

Choose your bundle in `config/wirekit.php`:

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

## User-Installed Dependencies

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

| Package | Install | Purpose |
| --- | --- | --- |
| Chart.js | `npm install chart.js` | Required for `<x-wirekit-chart>` when `charts.library` = `chartjs` (the default). |
| ApexCharts | `npm install apexcharts` | Required for `<x-wirekit-chart>` when `charts.library` = `apexcharts`. **Non-MIT** — see [Chart docs](components/chart.md#license-apexcharts-only) for license tiers (Community free under $2M USD revenue, Commercial above). Expose globally via `window.ApexCharts = ApexCharts;` and load `dist/wirekit-apex.js` after `dist/wirekit.js` in your layout. |
| Tiptap | `npm install @tiptap/core @tiptap/starter-kit` | Required for `<x-wirekit::editor>` (the rich-text editor). MIT core; optional Pro extensions (`@tiptap-pro/*`) are commercial. Expose a `window.wirekitEditor(config)` factory (the legacy `window.tiptapEditor` name still works as a deprecated alias) — see [Editor docs](components/editor.md). The editor falls back to a `<textarea>` if the engine is absent. |
| Icon packages | `composer require blade-ui-kit/blade-icons blade-ui-kit/blade-heroicons` | Required for `<x-wirekit::icon>` |
| QR code generator | `composer require bacon/bacon-qr-code` | Required for `<x-wirekit::qr-code>`, which renders the SVG server-side. Without it the component throws on first render rather than degrading — a QR code that silently shows nothing is worse than one that says it is missing. `wirekit:doctor` reports it as optional-and-absent. |
| Syntax highlighter (optional) | `npm install highlight.js` (or Shiki / Prism) | Optional for `<x-wirekit::code-block>`. WireKit emits `data-language="…"` as a HOOK attribute on the `<code>` tag — your highlighter targets that selector. WireKit ships no highlighter to keep the bundle lean (most apps already have one or use Markdown-rendering libraries with built-in highlighting) |

### Wiring a syntax highlighter (optional)

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

```javascript
// 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](https://prismjs.com) (`Prism.highlightAllUnder(document.body)`) and [Shiki](https://shiki.style) (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`:

```text
/*! 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) */
```