build69
Sign inGet API key
build69  /  Components  /  Data Display  /  EmptyState

EmptyState

v1.0.2Updated 20 Jul 2026

Friendly empty-list illustration + headline + sub-copy + primary CTA. Use whenever a list, search, or filter returns nothing.

View source← Back to catalog

Preview

Live · 12 stories
List EmptyOpen ↗
▸Why this is recommendedemptyplaceholderzero-statecta+1

The empty state — what EmptyState shows when there is no data — list.

Recommended for+14
  • ✓Empty DataTables
  • ✓Empty filter results
  • ✓New-user onboarding panels
  • ✓Search with zero hits
Tags+6
emptyplaceholderzero-statectalist
Features+4
  • Headline + sub-copy
  • Optional illustration / icon
  • Primary + secondary CTA
  • Variant for "no data yet" vs "no results"
  • Compact / full size
  • i18n: labels prop overrides every variant default title/description and the sketch aria-labels (DEFAULT_EMPTY_STATE_LABELS)
Not recommended for−2
  • ✕Loading states (use Skeleton)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "EmptyState" })

Usage

import { EmptyState } from '@/components/data-display/empty-state';

<EmptyState
  title="No invoices yet"
  description="Create your first invoice to start tracking revenue."
  action={<Button>New invoice</Button>}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
title

Headline

stringyes
description

Supporting copy

string—
icon

Illustration / icon

ReactNode—
action

Primary CTA button

ReactNode—
labels

Override built-in UI strings (per-variant default titles/descriptions and sketch-illustration aria-labels) for i18n; English defaults exported as DEFAULT_EMPTY_STATE_LABELS

Partial<EmptyStateLabels>—

Related

Platform docsAll componentsSource files