README

Build Slate UI interfaces from PHP. This package lets you compose Slate components in backend code with content, attributes, props, and themes, and render them anywhere Blade renders.

Requirements

PHP ^8.3
Laravel ^12.0|^13.0
Slate ^3.0 (anonymous <x-slate::*> Blade components)

Installation

composer require juaniquillo/slate-backend-components

The service provider is auto-discovered:

Juaniquillo\SlateBackendComponents\SlateBackendComponentsServiceProvider::class

Slate styling ships with Slate itself (resources/css/slate.css + Tailwind v4 tokens). No extra publish step is needed for basic use.

Built on Laravel Backend Components

This package is a Slate-flavored adapter over juaniquillo/laravel-backend-component, which provides the underlying engine: the component model, theme managers, CellBag, and the generic TableUtil. It is installed automatically as a dependency.

What this package adds on top:

SlateBackendComponent: the component class, hardcoded to the slate:: view context
SlateComponentEnum: every Slate component as a typed case (BUTTON, CARD_HEADER, TABLE_ROW, …)
SlateOverlayUtil: builds dialog, alert-dialog, sheet, and drawer trees
SlateAccordionUtil / SlateTabsUtil: build accordion and tab trees from keyed arrays
SlateUITableUtil: builds complete Slate tables from head/body arrays
SlateComponentBuilder / SlateLocalThemeComponentBuilder: fluent factories, including app-local theme resolution

Tip: Laravel Boost Skill If you use Laravel Boost, install the AI skill:
php artisan boost:add-skill https://github.com/juaniquillo/slate-backend-components

Usage

Component props (variant, loading, showError, …) are passed as attributes when scalar, or as props when rich (see the Slate documentation for each component's available props).

Components

Pick a component from the enum, set content and attributes, and render it. Components implement Laravel's Htmlable contract, so Blade renders them unescaped:

use Juaniquillo\SlateBackendComponents\SlateBackendComponent;
use Juaniquillo\SlateBackendComponents\SlateComponentEnum;

$button = (new SlateBackendComponent(SlateComponentEnum::BUTTON))
    ->setContent('Save changes')
    ->setAttributes(['id' => 'save-btn', 'variant' => 'primary']);

{{ $button }}

Or render to a string anywhere:

$html = $button->toHtml();

Components nest via setContents():

$card = (new SlateBackendComponent(SlateComponentEnum::CARD))
    ->setContents([
        (new SlateBackendComponent(SlateComponentEnum::CARD_HEADER))->setContent('Account'),
        (new SlateBackendComponent(SlateComponentEnum::CARD_CONTENT))->setContent('Manage your workspace settings.'),
        (new SlateBackendComponent(SlateComponentEnum::CARD_FOOTER))->setContent('Footer'),
    ]);

Builders

Fluent factories are available when you prefer them over new:

use Juaniquillo\SlateBackendComponents\Builders\SlateComponentBuilder;
use Juaniquillo\SlateBackendComponents\Builders\SlateLocalThemeComponentBuilder;
use Juaniquillo\SlateBackendComponents\SlateComponentEnum;

$button = SlateComponentBuilder::make(SlateComponentEnum::BUTTON)
    ->setContent('Save changes');

// Resolves themes from your app's views instead of the package defaults.
$themed = SlateLocalThemeComponentBuilder::make(SlateComponentEnum::BUTTON)
    ->setTheme('color', 'success');

Props

Scalar values travel as attributes, keeping the base contract intact. Anything richer (booleans, arrays, objects) travels as props:

$button = (new SlateBackendComponent(SlateComponentEnum::BUTTON))
    ->setAttribute('id', 'save-btn') // scalar attribute
    ->setProp('loading', true)       // rich prop
    ->setProps(['rows' => $orders]); // …or several at once

Props merge into the rendered output (winning over attributes on collision) but stay out of toArray(), keeping exports JSON-safe and round-trippable.

Tables

SlateUITableUtil builds a complete <x-slate::table> tree from plain head/body arrays. Cells accept plain values, component instances, CellBag objects (for per-cell attributes), or ['content' => …, 'theme' => …, 'attributes' => …] arrays:

use Juaniquillo\BackendComponents\Utils\CellBag;
use Juaniquillo\SlateBackendComponents\SlateBackendComponent;
use Juaniquillo\SlateBackendComponents\SlateComponentEnum;
use Juaniquillo\SlateBackendComponents\Utils\SlateUITableUtil;

$table = SlateUITableUtil::make(
    head: ['Customer', 'Status'],
    body: [
        [
            'Alice',
            new CellBag(
                content: (new SlateBackendComponent(SlateComponentEnum::BADGE))->setContent('Paid'),
                attributes: ['variant' => 'strong'],
            ),
        ],
    ],
)
    ->setTableAttributes(['id' => 'orders'])
    ->getComponent();

Per-section themes are available via setTableThemes(), setThThemes(), setTrThemes(), and setTdThemes().

Overlays

SlateOverlayUtil builds a complete dialog, alert-dialog, sheet, or drawer tree (trigger, content, header (title + description), and footer) from plain values or component instances:

use Juaniquillo\SlateBackendComponents\SlateBackendComponent;
use Juaniquillo\SlateBackendComponents\SlateComponentEnum;
use Juaniquillo\SlateBackendComponents\Utils\SlateOverlayUtil;

$dialog = SlateOverlayUtil::make(
    root: SlateComponentEnum::DIALOG,
    content: 'Edit your profile details below.',
    trigger: (new SlateBackendComponent(SlateComponentEnum::BUTTON))->setContent('Edit profile'),
    title: 'Edit profile',
    description: 'Make changes to your profile here.',
    footer: (new SlateBackendComponent(SlateComponentEnum::BUTTON))->setContent('Save changes'),
)
    ->setShowCloseButton(false)
    ->getComponent();

For alert dialogs, pass the action/cancel buttons as a footer array:

$confirm = SlateOverlayUtil::make(
    root: SlateComponentEnum::ALERT_DIALOG,
    content: 'This action cannot be undone.',
    trigger: 'Delete account',
    title: 'Are you sure?',
    footer: [$deleteButton, $cancelButton],
)->getComponent();

Accordions and tabs

SlateAccordionUtil and SlateTabsUtil build item trees from keyed arrays. Keys become the item values the Alpine state tracks, so triggers and panels stay wired:

use Juaniquillo\SlateBackendComponents\Utils\SlateAccordionUtil;
use Juaniquillo\SlateBackendComponents\Utils\SlateTabsUtil;

$accordion = SlateAccordionUtil::make(
    items: [
        'item-1' => ['title' => 'First', 'content' => 'First body'],
        'item-2' => ['title' => 'Second', 'content' => 'Second body'],
    ],
    defaultValue: 'item-1',
)->getComponent();

$tabs = SlateTabsUtil::make(
    tabs: [
        'overview' => ['label' => 'Overview', 'content' => 'Overview body'],
        'settings' => ['label' => 'Settings', 'content' => 'Settings body'],
    ],
    defaultValue: 'overview',
)->getComponent();

Testing

Individual checks:

composer analyse: PHPStan static analysis over src/.
composer rector:check: Rector dry-run over src/ (use composer rector to apply fixes).
composer lint:check: Pint style check (use composer lint to fix).
composer test:types: enforces 100% type coverage.
composer tests: the Pest suite.

Or run the whole gate at once (the same scripts CI executes, in order):

composer qa

Changelog

See CHANGELOG.md.

License

MIT. See LICENSE.md.

juaniquillo / slate-backend-components

Package info

Security

Statistics