Introduction

Wirestrap is a set of ready-to-use Blade components that covers the parts of a Livewire UI that are time-consuming to get right on your own: modal dialogs, floating elements, custom select, and more.

Each component is built on Alpine.js, ships with its own styles, and keeps external dependencies to a minimum. The goal is to stay simple and flexible: components work out of the box and get out of your way when you need to customize them.

You use them like any other Blade component:

<x-wirestrap::tooltip content="Must be unique across all users">
    <i class="bi bi-info-circle"></i>
</x-wirestrap::tooltip>

<x-wirestrap::select
    id="tags"
    wire:model="tags"
    label="Tags"
    :options="$tagOptions"
    multiple
    search
/>

<button x-on:click="$wirestrap.modal.show('modal-edit')">
    Edit
</button>

<x-wirestrap::modal id="modal-edit" title="Edit" size="800" draggable>
    <livewire:users.edit-form lazy />
</x-wirestrap::modal>

Styling

Wirestrap ships with its own default styles so you can get something that looks right without any configuration. If you use Bootstrap, the components automatically pick up your Bootstrap CSS variables. If you don't, you override a small set of CSS custom properties and the components follow.

All styles are driven by CSS custom properties. Global tokens like --ws-border-color or --ws-body-bg let you restyle every component at once from a single place. When you need more precision, each component exposes its own set of variables, such as --ws-tooltip-bg, so you can override individual components without touching the rest.

Each component also accepts a class in the config to add a CSS class globally on every instance of that component.

Components ship with a minimal default style, intentionally kept neutral so they adapt to your own design. This website uses a custom theme. The glass effects, gradients, and other visual treatments visible here are not part of the defaults.

Configuration

Every component prop has a corresponding entry in the published config file. Instead of repeating the same prop on every instance, you set the default once and all components pick it up. A prop passed directly on the component always takes precedence.

// config/wirestrap.php all tooltips trigger on click by default
'tooltip' => [
    'trigger' => 'click',
],

{{-- this one overrides the global default and triggers on hover --}}
<x-wirestrap::tooltip trigger="hover" content="...">
    ...
</x-wirestrap::tooltip>

CSP safe mode

All components are made to be compatible with Livewire's CSP safe mode.

Requirements

• Livewire 4 and its own requirements
• @floating-ui/dom (required for a lot of components)