Back to components
UI component

Empty State

Empty state with icon, title, message, and optional action button for zero-data screens.

Install

What it does

  • Custom icon via Ionicons or node
  • Title, subtitle, and description text
  • Optional action button for guided recovery

When to use

Use it

Empty lists, no search results, onboarding states, error recovery screens.

Skip it

Loading state (use loading-spinner or skeleton instead).

Files & routes added

  • components/ui/empty-state.tsx

Related components