# Empty State

Source: https://lumeo.nativ.sh/components/empty-state

# Empty State

A placeholder component for when there is no data to display.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<EmptyState />

## When to Use

-   No data messages when a list, table, or feed has zero items
-   Empty lists or collections before the user adds their first item
-   Search results pages that return no matches
-   First-time user experiences prompting an initial action

Preview Code

Default

### No results found

Try adjusting your search or filters to find what you're looking for.

Preview Code

With Icon and Action

### No projects yet

Get started by creating your first project.

Create Project

Preview Code

Inbox Empty

### Inbox zero

You have no new messages. Enjoy the silence.

## API Reference

### EmptyState

Prop

Type

Default

Description

IconContent

RenderFragment?

null

Custom icon displayed above the title. (Icon is a deprecated alias.)

Title

string?

null

Main heading text for the empty state.

Description

string?

null

Secondary description text below the title.

Action

RenderFragment?

null

Action buttons area below the description.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

## Related Components

-   [Card](/components/card) — Container for content that can hold empty states
-   [Alert](/components/alert) — Inline messages for warnings or informational notices
-   [Skeleton](/components/skeleton) — Placeholder while content is loading, before an empty state is shown