Wirestrap

Anonymous Blade components for Laravel Livewire.

Alpine.js components, made for Livewire
Default global config and per-instance overrides
Adapts to any CSS framework by adjusting a few CSS custom properties
One lightweight JS dependency, @floating-ui/dom, for floating element positioning
Ships with a reference docs for coding assistants
Free and open source

<x-wirestrap::modal
    id="edit-modal"
    title="Edit profile"
    draggable minimizable expandable resizable
>
    <x-wirestrap::tabs id="demo_tabs">
        <x-slot name="security_tab" label="Security" icon="bi-gear">
            <x-wirestrap::input
                wire:model="email"
                label="Email address"
                icon="bi-envelope"
                floating
            />

            <x-wirestrap::select
                id="role-select"
                wire:model="roleId"
                wire-options="getRoles"
                label="Role"
                search
            />
        </x-slot>
    </x-wirestrap::tabs>

    <x-slot:footer>
        <button data-ws-dismiss="modal">Cancel</button>
        <button wire:click="save">Save</button>
    </x-slot:footer>
</x-wirestrap::modal>

Open several at once, drag, minimize, resize or expand them.

Modals, fully loaded

Drag by the header, minimize to a shared taskbar, resize from any of five handles, or expand fullscreen. Several can be open at the same time.

Modal

Country

Select an option

Assign to

Form controls that earn their keep

Options come from a Livewire method, cached client-side after the first open. Search, multiple selection, floating labels, icons, groups, rich content via templates, and validation are all supported.

Select Autocomplete

Set up authentication

Build the dashboard

Write documentation

Deploy to production

Confirmations that call Livewire

Pass a method name and params to $wirestrap.alert.confirm(): when the user confirms, Livewire calls the method directly. You don't need to wire up events or build a modal yourself.

Alert

Floating, the whole stack

All three share a consistent API. They flip automatically when they'd overflow the viewport, support append-body to escape any stacking context, and expose Alpine magic helpers for remote control.

Tooltip Popover Flyout

Toast

Alert

Notifications

Use toast for non-blocking feedback and alert for centered dialogs. Both work from Alpine and from a Livewire component via $this->toast() and $this->alert().

Toast Alert

Wirestrap ships its own default styles driven by CSS custom properties. Global tokens like --ws-border-color restyle every component at once. Each component also exposes its own variables for per-component overrides. Bootstrap variables are picked up automatically when present.

Accordion

Named slots as panels. Each slot's name is the item key, label sets the header, and open controls the initial state. Pass single to close any open panel when another opens.

Accordion

Tabs and Menu

Named slots as panels with optional icons. Menu supports nested menu.accordion sub-groups and single mode that collapses siblings automatically.

Tabs Menu

See the components in action in a real-world scenario.

Open the demo