Empty states are where products earn second visits. The naive empty state is a centered icon with the word 'No items.' The serious empty state distinguishes between the user who's never used this feature (needs onboarding), the user who filtered too narrowly (needs to clear), and the user who used it once a year ago (needs re-engagement).
These references handle empty states as a first-class system layer — each variant gets its own copy, illustration, and primary action.
- 01First-run empty state explains what the feature is and offers a single primary action.
- 02Filtered-empty state offers a clear-filters action and shows what was searched.
- 03Lapsed-user empty state references the user's last activity and re-engages without nagging.
- 04Illustration is system-consistent — not stock art, not random emoji.
- 05Loading and error states share the same visual rhythm so transitions feel coherent.
- 01One generic empty state covers all three cases and serves none of them well.
- 02Stock illustrations from a third-party source make the surface feel like a template.
- 03The 'add your first item' CTA in the empty state doesn't match the global Add button pattern.
Mailchimp Design System
Mailchimp
Empty State Library
First-run, no-results, and lapsed-user states tuned for SMB onboarding — the most cited empty-state catalog in the industry.
Polaris
Shopify
EmptyState
Differentiates first-run vs filtered-results vs error variants with explicit guidance on copy and action language.
Gestalt
Module / EmptyState
Image-led empty states tuned for visual discovery products where the empty surface is the user's first impression of the feature.