Back to Home

Empty State

Display a helpful message when there's no content to show, with optional actions to guide users.

Basic Usage

A simple empty state with icon, title, and description:

No messages yet

When you receive messages, they will appear here.

<neura::empty-state
    icon="inbox"
    title="No messages yet"
    description="When you receive messages, they will appear here."
/>

With Actions

Add action buttons to guide users on what to do next:

No projects found

Get started by creating your first project.

<neura::empty-state
    icon="folder-plus"
    title="No projects found"
    description="Get started by creating your first project."
>
    <x-slot name="actions">
        <neura::button icon="plus">Create Project</neura::button>
        <neura::button variant="ghost">Import</neura::button>
    </x-slot>
</neura::empty-state>

Sizes

Choose from small, medium (default), or large sizes:

No documents

Upload your first document to get started.

No documents

Upload your first document to get started.

No documents

Upload your first document to get started.

Variants

Different visual styles for various contexts:

No team members

Invite people to collaborate on this project.

No images

Drag and drop images here, or click to browse.

No data available

Start tracking to see your analytics here.

No results found

Try adjusting your search or filter criteria.

With Image

Use a custom image instead of an icon:

Welcome to your dashboard

This is where you'll see an overview of your activity.

<neura::empty-state
    image="{{ asset('images/illustration.png') }}"
    title="Welcome to your dashboard"
    description="This is where you'll see an overview of your activity."
>
    <x-slot name="actions">
        <neura::button>Get Started</neura::button>
    </x-slot>
</neura::empty-state>

With Footer

Add additional information in a footer slot:

No recent activity

Your recent actions will be displayed here.

<neura::empty-state
    icon="clock"
    title="No recent activity"
    description="Your recent actions will be displayed here."
>
    <x-slot name="footer">
        <neura::link href="#">Learn about activity tracking</neura::link>
    </x-slot>
</neura::empty-state>

Common Use Cases

Examples for common empty state scenarios:

No results for 'lorem ipsum'

Try different keywords or remove filters.

Something went wrong

We couldn't load your data. Please try again.

All caught up!

You have no new notifications.

Drop files here

or click to browse from your computer

Supports: PDF, DOC, DOCX, XLS, XLSX (max 10MB)

Props

Prop Type Default Description
icon string null Heroicon name to display
image string null URL of image to display instead of icon
title string null Main heading text
description string null Supporting text below the title
size string md Size variant: sm, md, lg
variant string default Visual style: default, bordered, card, ghost
compact boolean false Remove max-width constraint for full-width display

Slots

Slot Description
default Custom content below description
illustration Custom illustration/SVG instead of icon
actions Action buttons (primary CTA)
footer Footer content (links, additional info)