Empty State

EmptyState displays a centered placeholder when there is no data to show. It supports an icon, title, description, and an action slot.

ExamplesCodeUsageChangelog

Basic usage

No results found

Tailwind v4

<EmptyState title="No results found" />

With description

No equipment records

Add your first piece of equipment to get started.

Tailwind v4

<EmptyState
  title="No equipment records"
  description="Add your first piece of equipment to get started."
/>

With icon

The icon prop accepts any single character or emoji:

🏗️

No shifts scheduled

Create a shift to begin tracking production.

Tailwind v4

<EmptyState
  icon="🏗️"
  title="No shifts scheduled"
  description="Create a shift to begin tracking production."
/>

With action button

Use the action slot for a call-to-action:

📋

No sieve tests

Run your first sieve test to see results here.

Tailwind v4

<EmptyState
  icon="📋"
  title="No sieve tests"
  description="Run your first sieve test to see results here."
>
  <template #action>
    <Button @click="openCreateModal">Add Sieve Test</Button>
  </template>
</EmptyState>

Inside a card

No loadout events today

Loadout events will appear here as they are recorded.

Tailwind v4

<Card>
  <EmptyState
    title="No loadout events today"
    description="Loadout events will appear here as they are recorded."
  />
</Card>

Props

Prop	Type	Default	Description
title	string	—	Main heading text
description	string	—	Supporting description text
icon	string	—	Emoji or character shown above the title

Slots

Slot	Description
action	Optional call-to-action — centered below the description