Installation

To get started, install Wirestrap via Composer:

composer require wirestrap/wirestrap

JavaScript

Several components depend on @floating-ui/dom for positioning. Install it alongside the package:

npm install @floating-ui/dom

Import Wirestrap in your JS bundle:

import '../../vendor/wirestrap/wirestrap/resources/js/wirestrap.js';

Styles

Import the stylesheet in your CSS entry point:

@import '../../vendor/wirestrap/wirestrap/dist/wirestrap.css';

Configuration

Publish the config file to set package-wide defaults for every component:

php artisan vendor:publish --tag=wirestrap:config

Strict mode

Strict mode is enabled by default. Components that require an id will throw an exception if none is provided, preventing silent misbehaviour during Livewire re-renders. You can disable it in the config:

// config/wirestrap.php
'strict_mode' => false,

Coding assistants

Wirestrap ships with a concise Markdown reference covering every component, their props, and their JavaScript API. Publish it so your coding assistant can read it and make accurate use of Wirestrap without guessing:

php artisan vendor:publish --tag=wirestrap:docs

The files are published to docs/wirestrap/ at the root of your project. Point your assistant at that directory (via a CLAUDE.md, .cursorrules, or equivalent) to give it full context.

If you'd rather not commit the docs to your repository, you can skip publishing and simply tell your assistant to read them directly from vendor/wirestrap/wirestrap/docs/.