Laravel Empty State Component
Free · MITPlaceholder display for when no data is available, with icon, message, and call-to-action.
A Empty State built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag:
<x-aura::empty-state>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::empty-state
title="No results found"
description="Try adjusting your search or filter criteria."
/>See the full API, props and live examples in the Empty State documentation.
Overview
The Empty State component provides a centered, visually clear placeholder for sections that have no data to display. It includes an icon, a title, an optional description, and a slot for action buttons. This guides users on what to do next rather than showing a blank area.
Use empty states for:
- Empty data tables
- No search results
- Empty inboxes or feeds
- First-time user onboarding
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon |
string |
'inbox' |
Icon name displayed at the top |
title |
string |
'Nessun risultato' |
Heading text |
description |
string|null |
null |
Supplementary text below the title |
Slots
| Slot | Description |
|---|---|
| Default | Action area below the description. Renders only when the slot has content. |
See more examples and every variant in the Empty State documentation.