PHPackages                             davidgut/boson - 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. [Templating & Views](/categories/templating)
4. /
5. davidgut/boson

ActiveLibrary[Templating & Views](/categories/templating)

davidgut/boson
==============

Minimal, well-designed, flexible Laravel Blade components.

v1.2.3(4mo ago)0164MITCSSPHP ^8.2

Since Mar 22Pushed 4mo agoCompare

[ Source](https://github.com/davidgut/bosonui)[ Packagist](https://packagist.org/packages/davidgut/boson)[ Docs](https://github.com/davidgut/bosonui)[ RSS](/packages/davidgut-boson/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependencies (6)Versions (25)Used By (0)

Boson
=====

[](#boson)

Minimal, well-designed, flexible Laravel Blade components. Turbo-ready out of the box.

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

[](#requirements)

- PHP 8.2+
- Laravel 12.0+

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

[](#installation)

```
composer require davidgut/boson
```

The package auto-registers its service provider via Laravel's package discovery.

### Include CSS & JS

[](#include-css--js)

Import the Boson stylesheet and script in your application's entry points:

```
/* resources/css/app.css */
@import '../../vendor/davidgut/boson/resources/css/boson.css';
```

```
// resources/js/app.js
import '../../vendor/davidgut/boson/resources/js/boson.js';
```

Then compile your assets as usual with Vite (or your bundler of choice).

Usage
-----

[](#usage)

All components are available under the `boson::` namespace:

```
Click me

Content goes here.

```

### Available Components

[](#available-components)

Accordion, Avatar, Badge, Button, Card, Checkbox, Combobox, Description, Dropdown, Error, Field, Form, Heading, Icon, Img, Input, Label, Link, Listbox, Modal, Navbar, Radio, Select, Separator, Spacer, Table, Tabs, Textarea, Toast.

### Toasts

[](#toasts)

Add `` once in your layout. Then flash toasts from PHP or trigger them from JavaScript.

**PHP.** Flash via the `Toast` helper in controllers or middleware:

```
use DavidGut\Boson\Toast;

Toast::show('Something happened.');
Toast::success('Saved successfully!');
Toast::warning('Check your input.', 'Heads up');
Toast::danger('Something went wrong.');
```

All methods accept an optional `$heading` and `$duration` (in ms, default `5000`).

**JavaScript.** Trigger toasts client-side via the global `$toast` helper:

```
$toast.show('Something happened.');
$toast.success('Saved!');
$toast.warning({ heading: 'Heads up', text: 'Check your input.' });
$toast.danger({ heading: 'Error', text: 'Something went wrong.', duration: 8000 });
```

You can also dismiss a toast programmatically:

```
const toast = $toast.success('Done!');
$toast.dismiss(toast);
```

### Async Forms

[](#async-forms)

Add `async` to `` for JavaScript-powered submission. Response handling is automatic:

Controller returnsBoson does`redirect('/dashboard')`Navigates normally`response()->json(['data' => $model])`Updates all `[data-field]` elements in-place, resets the form, closes the parent modal`422` validation responsePopulates matching `` components```

```

Without `async`, the form submits normally (Turbo handles it if installed, browser handles it otherwise).

**GET forms** send form data as URL query parameters automatically.

**In-page updates** support dot-notation for nested data:

```
return response()->json([
    'data' => ['team' => ['name' => 'Acme']]
]);
```

```
Old Name  {{-- updates to "Acme" --}}
```

### Async Options (Combobox & Listbox)

[](#async-options-combobox--listbox)

Combobox and Listbox support loading options asynchronously via `async="/url"`:

```

```

The endpoint should return a JSON array (or `{ data: [...] }`). Each item should have `value`/`id` and `label`/`name`/`text` keys:

```
[{ "value": "1", "label": "John Doe" }, { "value": "2", "label": "Jane Smith" }]
```

PropDefaultDescription`async`—URL to fetch options from`async:param``q`Query parameter name`async:min``2`Minimum characters before fetching`async:debounce``300`Debounce delay in ms### Events

[](#events)

Boson provides a declarative event system via `on:` attributes. Write inline expressions directly in Blade:

```

Click me

```

Inside a handler, these helpers are available:

**`$event`** is the raw DOM event:

```
Inspect
```

**`$data`** is shorthand for `$event.detail.data` (the response payload on form success):

```

```

**`$(selector)`** is a chainable DOM helper for updating page elements without a reload:

```
{{-- Update text content --}}

{{-- Set a data attribute (e.g. for CSS-driven badge colors) --}}

{{-- Toggle visibility --}}

```

Available methods: `.text(value)`, `.class(name, force?)`, `.data(key, value)`, `.attr(key, value)`, `.toggle()`.

**`$match(value, map, fallback?)`** is a value lookup, like PHP's `match`:

```

```

**`$toast`** triggers toast notifications:

```

```

**`this`** refers to the element that owns the `on:` attribute:

```
Click me
```

The system supports both native DOM events (`click`, `submit`, `keydown`, etc.) and custom Boson events (`success`, `error`, `open`, `close`, `change`, `select`, `deselect`).

Register custom events at runtime:

```
import { $events } from '../../vendor/davidgut/boson/resources/js/boson.js';

$events.register('myevent');        // custom (dispatched as boson:myevent)
$events.register('scroll', true);   // native
```

### Component Data Attributes

[](#component-data-attributes)

All interactive Boson components follow a consistent `data-controller` / `data-{name}-target` convention:

```

    Toggle
    ...

```

Access component instances programmatically via `el.boson`:

```
const el = document.querySelector('[data-controller="modal"]');
el.boson.open();
el.boson.close();
el.boson.destroy();  // removes all event listeners
```

ComponentControllerAccordion`accordion`Combobox`combobox`Dropdown`dropdown`Form`form`Listbox`listbox`Modal`modal`Navlist`navlist`Sidebar`sidebar`Tabs`tab`Toast`toast`### Turbo Compatibility

[](#turbo-compatibility)

Turbo is entirely optional. Boson has no dependency on it and works perfectly without it. When [Turbo Laravel](https://turbo-laravel.com/) is present, everything works seamlessly with zero configuration.

The internal lifecycle system automatically handles:

- **Turbo Drive**: components re-initialize after every page navigation and clean up before Turbo caches the page
- **Turbo Frames**: components inside frames initialize when the frame loads new content
- **Turbo Streams**: dynamically inserted components are initialized automatically via `MutationObserver`

If your app doesn't use Turbo, nothing changes. Components initialize on `DOMContentLoaded` as usual.

**Building custom components?** Follow the same protocol to get Turbo compatibility for free:

```
import { lifecycle } from '../../vendor/davidgut/boson/resources/js/core/lifecycle.js';

class MyComponent {
    constructor(element) {
        this.element = element;
        this.abortController = new AbortController();
        // bind events with { signal: this.abortController.signal }
    }

    destroy() {
        this.abortController.abort();
    }
}

lifecycle.register('my-component', MyComponent);
```

Then in Blade:

```
...
```

#### Turbo Attributes

[](#turbo-attributes)

Link, Form, Button, Navbar Item, Navlist Item, and Breadcrumbs Item accept Turbo data attributes via the `turbo:` prop prefix. Each `turbo:*` prop maps to its `data-turbo-*` HTML attribute:

```
{{-- Target a Turbo Frame --}}
Users

{{-- Replace history instead of push --}}
Tab

{{-- Preload link into cache --}}
Dashboard

{{-- Confirm dialog before form submission --}}

    Delete

{{-- Accept Turbo Stream responses on a GET link --}}
Notifications
```

To **disable Turbo** on any of these components, use `:turbo="false"`:

```
Legacy Page
...
```

PropHTML OutputDescription`:turbo="false"``data-turbo="false"`Disable Turbo on this element`turbo:frame``data-turbo-frame`Target a specific Turbo Frame`turbo:action``data-turbo-action``advance` or `replace` history`turbo:preload``data-turbo-preload`Pre-fetch into cache`turbo:prefetch``data-turbo-prefetch`Control hover prefetching`turbo:stream``data-turbo-stream`Accept Turbo Stream responses`turbo:confirm``data-turbo-confirm`Show confirmation dialog`turbo:method``data-turbo-method`Override link request method`turbo:submits-with``data-turbo-submits-with`Text to show while submittingAI Rules Generation
-------------------

[](#ai-rules-generation)

Boson can generate a compact `.mdc` context file containing all component documentation, props, and usage examples. Designed to be consumed by AI coding assistants.

```
php artisan boson:rules
```

This parses every Boson component's `@description`, `@usage`, and props, then writes a single `boson.mdc` file to your IDE's rules directory.

### Options

[](#options)

OptionDefaultDescription`--ide=``cursor`Target IDE: `cursor` (writes to `.cursor/rules/`) or `antigravity` (writes to `.agent/rules/`)`--output=`*(auto)*Custom output directory`--canary``false`Include a verification string to test context loadingThe canary flag can also be enabled globally via the `boson.rules.canary` config option.

Publishing
----------

[](#publishing)

Publish the config file:

```
php artisan vendor:publish --tag=boson-config
```

Publish the views for customization:

```
php artisan vendor:publish --tag=boson-views
```

License
-------

[](#license)

MIT. See [LICENSE](LICENSE) for details.

###  Health Score

41

—

FairBetter than 87% of packages

Maintenance78

Regular maintenance activity

Popularity15

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

24

Last Release

120d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/a1163b75d4f25d863e452d8118eb3b266c29656783beb9a9c02c9498ced60b8e?d=identicon)[davidgut\_](/maintainers/davidgut_)

---

Tags

laraveluicomponentsbladeboson

### Embed Badge

![Health badge](/badges/davidgut-boson/health.svg)

```
[![Health](https://phpackages.com/badges/davidgut-boson/health.svg)](https://phpackages.com/packages/davidgut-boson)
```

###  Alternatives

[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k612.7k24](/packages/robsontenorio-mary)[hasinhayder/tyro-login

Tyro Login - Beautiful, customizable authentication views for Laravel 12 & 13

2488.1k7](/packages/hasinhayder-tyro-login)[hasinhayder/tyro-dashboard

Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings

5495.1k](/packages/hasinhayder-tyro-dashboard)[technikermathe/blade-lucide-icons

A package to easily make use of Lucide icons in your Laravel Blade views.

18473.9k13](/packages/technikermathe-blade-lucide-icons)[ddfsn/blade-components

Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.

235.3k](/packages/ddfsn-blade-components)[electrik/slate

Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project

102.5k1](/packages/electrik-slate)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)