--- title: Empty State summary: An empty state or blank page is commonly used as a placeholder for first-use, empty data, or an error screen. Its goal is to engage users when there is no content to display, which makes its design important for the overall user experience of your website or app. description: Engage users in an empty or error screen. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import Illustration from '@ui/Illustration.astro'; ## Default markup Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.

No results found

Try adjusting your search or filter to find what you're looking for.

## Empty state with illustration Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly. Do you need an illustration to enhance your web designs? We've got something for you! Check out our premium SVG [illustrations](https://tabler.io/illustrations).

Invoices are managed from here

Try adjusting your search or filter to find what you're looking for.

## Empty state with header Instead of adding an icon or illustration you can simply give the text:
404

Oops… You just found an error page

Try adjusting your search or filter to find what you're looking for.