Empty states

What a screen says when there is nothing in it yet.

3 variants

A first-use empty state for a list page: a line illustration, one sentence, a primary action with an import link, and three starter templates.

A search with no results: the query in the heading, a spelling suggestion, filters you can remove as chips, popular searches to try instead, and a way to contact support.

Three states a page can land in, as one component with a variant prop: no access (with a request form), offline (retry and last-synced time) and something went wrong (with a copyable error id).