Download the PHP package reaper/ui without Composer

Reaper UI

Custom Bootstrap-based UI components for Laravel, plus a Livewire-powered global modal system.

Requirements

• Laravel (tested with the laravel/laravel skeleton, v10)
• livewire/livewire ^3.0 (installed automatically as a dependency)
• Alpine.js (ships with Livewire v3) — used by the global modal for open/close transitions
• Bootstrap CSS + Bootstrap Icons — the components emit Bootstrap classes (btn, btn-primary, bi bi-*, etc.) and expect Bootstrap to be loaded in the host app

Installation

This package is currently distributed as a local path repository, not from Packagist. In the consuming app's root composer.json:

Then install:

The service provider is picked up automatically via Laravel package discovery (declared in composer.json under extra.laravel.providers) — no manual registration needed in config/app.php.

Publishing assets

The package exposes two publish tags:

Publish everything:

Or publish selectively:

You only need reaper-ui-config if you plan to define Opening a modal).

Or use the package's own publish command

The package also ships reaper-ui:publish, a thin wrapper around vendor:publish that's scoped to only this package's files — so it never touches publishables from other packages, unlike a bare php artisan vendor:publish.

What the package registers

On boot, ReaperUiServiceProvider (src/ReaperUiServiceProvider.php):

• Loads package views under the reaper:: namespace (resources/views)
• Registers the <x-reaper-ui::btn> Blade component
• Registers the reaper-ui-modal Livewire component
• Registers a test route group under the reaper-ui prefix/name (routes/web.php — currently just a GET /reaper-ui/test sanity-check route, not meant for app use)
• Registers the reaper-ui:publish Artisan command (console only)

Button component

<x-reaper-ui::btn> renders a Bootstrap button (or an <a> if link is given and resolves to a named route).

Props

Regular Blade attributes (class, id, ...) can be passed normally and are merged onto the root <button> element (not the <a> variant).

type — color and size

Dot-separated, color[.size]:

• Color (required position): one of pri, sec, suc, dan, war, inf, lig, dar, lin (primary, secondary, success, danger, warning, info, light, dark, link) → adds btn-{color}. Defaults to pri if omitted/unrecognized.
• Size (optional, second position): sm or lg → adds btn-{size}. Any other value is silently ignored.

icon — icon

Renders a Bootstrap Icon (<i class="bi bi-...">) next to the label.

Two names are aliased for backwards compatibility with the host app's original icon set: save → bi bi-floppy, add → bi bi-plus-circle. Any other name is used as-is (bi bi-{name}).

Global Modal

A single Livewire-driven modal shell that can mount any Livewire component inside it, driven either from server-side Livewire code or from a plain DOM click/JS event — useful for opening the same modal from a Blade button, an Alpine component, or fully static HTML without wiring up Livewire on the trigger element itself.

1. Configure the modals you want available

After publishing reaper-ui-config, edit config/global-modal.php:

Each top-level key (edit-user above) is the modal name you reference when opening it. component-path is the only required field.

stable controls the Livewire wire:key used for the nested component: leave it false (default) so the child component is force-remounted every time the modal opens (fresh state per open, even with the same params); set it true if you want the same params to reuse an existing component instance instead of remounting.

2. Render the modal shell once in your layout

3. Load the JS trigger helper (optional — only for non-Livewire triggers)

Publish reaper-ui-assets, then import and initialize it once (e.g. in resources/js/app.js):

This wires up two things globally:

• A window listener for a open-application-modal CustomEvent
• A document click listener for elements matching #global-modal or [data-trigger="global-modal"]

Opening a modal

From a plain button (no Livewire needed on the trigger):

By dispatching the CustomEvent yourself (e.g. from Alpine or vanilla JS):

From server-side Livewire code, dispatch the browser event open-global-modal directly:

In all cases, component must match a key in config/global-modal.php, and params is passed into the mounted component as its params prop/argument.

Inside the mounted component

The component referenced by component-path receives a params array (from mount(array $params) or a public $params property, depending on how you write it). Optionally listen for global-modal-component-ready to run setup logic once it's live in the DOM:

Closing

The modal closes when the user clicks the backdrop, clicks the × close button, or presses Esc. There's no manual "close" call needed from inside the child component for the common case.

Notes / known limitations

• The routes/web.php file registered under the reaper-ui prefix currently only contains a placeholder test route (GET /reaper-ui/test) — it's not part of the public API and can be ignored.
• Only sm and lg sizes are honored on <x-reaper-ui::btn>.