Laravel Status Tiles Component

Free · MIT

A grid of service states, said in words as well as colour.

A Status Tiles built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::status-tiles>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::status-tiles label="Systems" :columns="4">
    <x-aura::status-tiles.tile name="API" status="operational" />
    <x-aura::status-tiles.tile name="Dashboard" status="operational" />
    <x-aura::status-tiles.tile name="Webhooks" status="degraded" detail="Delays up to 5 min" />
    <x-aura::status-tiles.tile name="Exports" status="maintenance" detail="Until 18:00" />
</x-aura::status-tiles>

See the full API, props and live examples in the Status Tiles documentation.

Overview

<x-aura::status-tiles> is the grid on a status page: one tile per service.

Props

Prop	Type	Default	Description
`label`	`string\|null`	`null`	Names the list. Defaults to the translated "Service status".
`columns`	`int`	`4`	2, 3, 4 or 6. Responsive, written out rather than interpolated.

Status Tile

Prop	Type	Default	Description
`name`	`string`	`''`	The service.
`status`	`string`	`'operational'`	`operational`, `degraded`, `outage`, `maintenance`, `unknown`. Anything else becomes `unknown`.
`detail`	`string\|null`	`null`	A short note under the state.
`href`	`string\|null`	`null`	Links the tile.