PHPackages                             reaper/ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. reaper/ui

ActiveLibrary

reaper/ui
=========

Custom UI components for Laravel using Bootstrap

v0.0.1(today)00MITPHP

Since Jul 27Pushed todayCompare

[ Source](https://github.com/HAJDARODAVID/reaper-ui)[ Packagist](https://packagist.org/packages/reaper/ui)[ RSS](/packages/reaper-ui/feed)WikiDiscussions master Synced today

READMEChangelogDependencies (1)Versions (2)Used By (0)

Reaper UI
=========

[](#reaper-ui)

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

Requirements
------------

[](#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](https://icons.getbootstrap.com/) — the components emit Bootstrap classes (`btn`, `btn-primary`, `bi bi-*`, etc.) and expect Bootstrap to be loaded in the host app

Installation
------------

[](#installation)

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

```
{
    "require": {
        "reaper/ui": "dev-master"
    },
    "repositories": [
        {
            "type": "path",
            "url": "packages/reaper/ui",
            "options": {
                "symlink": true
            }
        }
    ]
}
```

Then install:

```
composer require reaper/ui:dev-master
```

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

[](#publishing-assets)

The package exposes two publish tags:

TagPublishesDestination`reaper-ui-config``config/global-modal.php``config/global-modal.php``reaper-ui-assets``resources/js/global-modal.js``resources/js/vendor/reaper-ui/global-modal.js`Publish everything:

```
php artisan vendor:publish --provider="Reaper\Ui\ReaperUiServiceProvider"
```

Or publish selectively:

```
php artisan vendor:publish --tag=reaper-ui-config
php artisan vendor:publish --tag=reaper-ui-assets
```

You only need `reaper-ui-config` if you plan to define [global modals](#global-modal) (see below) — the file ships empty by default. You need `reaper-ui-assets` if you plan to use the global modal's trigger helpers from plain HTML/JS (see [Opening a modal](#opening-a-modal)).

### Or use the package's own publish command

[](#or-use-the-packages-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`.

```
# publish everything from reaper/ui
php artisan reaper-ui:publish

# publish only specific tags
php artisan reaper-ui:publish --tag=reaper-ui-config
php artisan reaper-ui:publish --tag=reaper-ui-config --tag=reaper-ui-assets

# overwrite files that already exist at the destination
php artisan reaper-ui:publish --force
```

What the package registers
--------------------------

[](#what-the-package-registers)

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

- Loads package views under the `reaper::` namespace (`resources/views`)
- Registers the `` Blade component
- Registers the `global-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
----------------

[](#button-component)

`` renders a Bootstrap button (or an `` if `link` is given and resolves to a named route).

```

```

### Props

[](#props)

PropTypeDescription`text`stringButton label (alternative to passing the slot)`type`stringDot-separated `color.size`, see below`icon`stringDot-separated `icon-name.position`, see below`wClickMethod` / `wClickParam`stringRenders `wire:click="{method}('{param}')"``action` / `param`stringAlternative to `wClickMethod`/`wClickParam` — same `wire:click="{action}('{param}')"` output, takes precedence if both are set`link`stringA named route. If set (and it exists via `Route::has()`), renders an `` instead of a ```disabled`boolAdds the `disabled` attribute`stopPropagation`boolAdds `onclick="event.stopPropagation();"`Regular Blade attributes (`class`, `id`, ...) can be passed normally and are merged onto the root `` element (not the `` variant).

### `type` — color and size

[](#type--color-and-size)

Dot-separated, `color[.size]`:

```
type="pri.sm"

```

- 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

[](#icon--icon)

Renders a [Bootstrap Icon](https://icons.getbootstrap.com/) (``) next to the label.

```
{{-- shorthand: just the icon name --}}

{{-- explicit form: icon + position (start/end, default start) --}}

```

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

[](#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

[](#1-configure-the-modals-you-want-available)

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

```