Guides · · Maxwell Prehoda
12 Empty State Examples That Turn "Nothing Here" Into a Next Step
An empty state has one job: explain why there is nothing here and give the user the next step. A good one says what will appear, why it is empty right now, and offers a single button or link to fill it. Illustration and motion are optional extras that make the moment friendlier; they never replace the message.
Most empty state galleries are screenshots with no explanation. This list pairs real products and the design systems of GitHub, Atlassian, IBM, Apple and Google with the reasoning behind each, drawing on Nielsen Norman Group's research where it names specific products. Each entry says what it is best for, how it is built, and the trap to avoid. Where a little motion helps, a pure-CSS demo from our directory plays under the entry.
1. Datadog's empty favorites list: Best for teaching a feature at the moment it is needed
Platform: Web app (cited by Nielsen Norman Group)
In NN/g's study of empty states in complex applications, Datadog's empty favorites list is the example of a learning cue. Instead of a blank panel it says "Star your favorites to list them here." Seven words explain what the panel is for, how to fill it, and which icon to look for.
This is the cheapest empty state to build and one of the most effective: no illustration, just an instruction in the place where the user is already looking. It works for any list that fills from an action elsewhere: favorites, pinned items, saved searches, watched files.
If you want the star itself to teach, our Star Favorite Checkbox below is a pure-CSS star that spins in, fills and throws five sparks only when a new favorite is added.
Watch out for: Name the exact control in the copy ("star", "pin", "save") and make sure the icon really looks like that word. A learning cue that points at an icon nobody can find is worse than silence.
2. Loggly's two pathways: Best for data products whose first screen starts empty
Platform: Web app (cited by Nielsen Norman Group)
Log management tool Loggly appears in the same NN/g article as an example of direct pathways. Its empty state offers two ways forward: add your log sources, or load demo data and explore the product right away.
The demo data option is the clever part. Analytics, monitoring and dashboard products are meaningless until data arrives, which can take days. Letting people play with realistic sample data first shows them what success looks like, then the real setup has a reason.
Watch out for: Make demo data obviously demo (a banner, a label on every chart) and easy to clear, or new users will mistake it for their own numbers.
3. The false "No records" flash: Best for avoiding fake empty states while data loads
Platform: Any app (anti-pattern documented by NN/g)
The most common empty state bug isn't a design choice at all. NN/g describes employee-management software that briefly showed "No records" on a screen of email templates before the templates loaded. For a moment, users were told their data was gone.
The fix is to separate three states that often share one component: loading, empty, and error. Show a skeleton or spinner while the request is in flight, and only show the empty message once the request has finished and really returned nothing.
Our Email Inbox Skeleton below shows the loading half of that split in pure CSS: a two-pane mail layout that shimmers until real content replaces it.
Watch out for: Test on a slow network (browser devtools throttling) to catch this. On fast Wi-Fi the flash lasts a few milliseconds and nobody on the team notices.
4. GitHub Primer Blankslate: Best for developer tools that need a consistent empty pattern
Platform: React and Rails components (GitHub Primer)
GitHub's design system calls its empty state a Blankslate and defines it as a placeholder that tells users why content is missing. The anatomy is a good default for any product: a Visual (icon or illustration), a Heading, a Description, a Primary Action and an optional Secondary Action. Variants add a border, a narrow layout or more spacious padding.
The value is consistency. Every empty repository list, issue filter and project board on GitHub reads the same way, so users learn the pattern once. If you are building a design system, copy this slot structure even if you change everything about the look.
Watch out for: The React component is marked experimental in Primer's docs. If you depend on it directly, pin your version and watch the changelog.
5. Atlassian Design System EmptyState: Best for empty states with a loading action and images
Platform: React (Atlassian Design System)
Atlassian's EmptyState, used across Jira and Confluence, requires only a header and adds an optional description and up to three actions: a primary button for the recommended next step, a secondary alternative, and a tertiary link to documentation. Setting `isLoading` shows a spinner next to the actions, so a "Create" button can show progress without the whole state disappearing.
It also handles a detail most teams miss: you pass the image's width and height so the layout doesn't jump when the illustration loads. Atlassian's guidance adds a useful test: if you have to shrink a spot illustration to fit, ask whether the image belongs there at all.
Watch out for: Three actions is the maximum, not the target. One clear primary action converts better than a row of equal choices.
6. IBM Carbon empty states pattern: Best for enterprise apps with many empty panels at once
Platform: Carbon Design System guidelines
Carbon splits empty states into three kinds: no data (first use, nothing created yet), user action (a search or filter with no results, or a confirmation that a task finished), and error management (permissions, system problems, missing configuration). Each needs different copy, and Carbon insists every one gives a path forward.
Its advice on images is the most practical anywhere. Images are optional, they should match the available space, and when several empty states may show at once (a dashboard of empty widgets) text-only states often work better than repeating the same illustration. Illustrations are decorative, so they get an empty alt attribute and must not carry information.
Watch out for: Carbon warns that in serious error situations a cute image can seem flippant. Save playful art for first-use states, never for "your data could not be loaded".
7. Material Design's starter content and best match: Best for first-run screens and no-results searches
Platform: Material Design guidelines (Material 1, archived)
Google's original Material guidelines offer alternatives to a bare empty screen. Starter content gives new users something to explore immediately, such as a reading app that ships with free popular books, as long as it is easy to delete or replace. Educational content is a short, dismissible explanation of what the screen will do. And for searches, best match shows near results (for a misspelled query, say) under a heading that makes clear they are not exact matches.
On imagery, Material is notably restrained: use a subtle, neutral image that blends into the background, and avoid bright images that look tappable. That advice is the reason motion on empty states should be slow and quiet if you use it at all.
Watch out for: Material 1 is no longer maintained. The patterns are sound, but take component specifics from Material 3.
9. LottieFiles free empty state animations: Best for adding a small animated illustration quickly
Platform: Lottie JSON, GIF and MP4 (free and paid packs)
If you want an animated illustration and don't have an illustrator, LottieFiles lists over a hundred free empty state animations from its community, downloadable as Lottie JSON, GIF or MP4: empty boxes, blank documents, searching characters, quiet inboxes.
Pick one that loops slowly and has a calm resting pose. An empty state is often on screen for a long time (an empty inbox can sit open all day), so anything bouncy becomes irritating fast.
Watch out for: Check each animation's license and credit requirements before shipping, and remember Lottie needs a player script. Freeze it on the first frame for reduced-motion users.
10. Our Folder Files Rising: Best for empty file, document and project lists
Platform: Motions directory, free, pure CSS and SVG Ours
A hairline isometric folder with three sheets that rise out of it on staggered springs, the middle one tagged in your accent color, then slide back in. It says "your files will live here" without words, and the thin line style sits quietly beside a heading and an Upload button, the way Material's guidance asks.
It is upright SVG planes moved by CSS translate, so it stays crisp at any size and costs no image requests. The Hairline Animations directory has matching scenes for other empty screens, such as a kanban board, a card deck and a database.
Watch out for: Keep it small (a spot illustration, not a hero). Pair it with a heading and one action, and mark it decorative so screen readers skip it.
11. Our Mail Between Two Houses: Best for empty inboxes and message lists
Platform: Motions directory, free, pure CSS and SVG Ours
An accent envelope walks the dashed route from one hairline house to its neighbor, the mailbox flag snaps up on arrival, and a reply makes the trip back. For an empty inbox, chat or notifications panel, it shows what will happen here once messages start arriving.
The loop is slow and steady, which suits a screen that may stay empty for a while. Use it for first-use empty states rather than for inbox zero, where a still "all caught up" message usually feels more finished.
Watch out for: Don't use the same animation for "nothing yet" and "failed to load". If the inbox couldn't sync, show an error with a retry button instead.
12. Our Float keyframe: Best for giving any existing illustration gentle life
Platform: Motions directory, free, pure CSS Ours
If you already have an empty state illustration, the smallest useful motion is a float: the art drifts up and down in a slow, even three second ease-in-out loop, and its shadow stays on the ground and softens as it rises.
That one detail, the shadow reacting, is what makes it feel physical rather than like a bobbing icon. Apply it to your existing SVG or PNG with one class, and the empty state feels alive without changing your art.
Watch out for: Float only the illustration, never the heading or button. Moving text is harder to read, and a moving button is harder to hit.
How to choose an empty state
Match it to why it is empty
Use Carbon's three kinds. First use needs an explanation and one action, ideally with starter or demo data like Loggly. A search or filter with no results needs a suggestion (fix the spelling, clear a filter, best matches). An error needs a reason and a retry. One component with three variants beats one generic "No data" for all of them.
Match it to your platform
Native Apple apps should start with ContentUnavailableView. React teams can borrow the slot structure of GitHub's Blankslate or Atlassian's EmptyState. If you have no design system, write the copy first (heading, one line, one button), then add a spot illustration from our Hairline Animations or LottieFiles.
Match the motion to the wait
Empty states can stay on screen for hours, so motion must be slow, small and confined to the illustration: a float, a quiet loop, or a one-time entrance. Loading is a different state; show a skeleton until the request finishes so you never flash a false empty. Our skeleton screen guide covers that half.
Audit your empty states this week
Create a fresh account and click through every list, search and dashboard before adding any data. Screenshot each empty screen. Any that say only "No data" get a heading, a reason and one action. Any that flash empty while loading get a skeleton.
Then, if you want an illustration that moves, describe it in the creator ("an empty mailbox whose flag lifts every few seconds, hairline style") and get production-ready CSS with a reduced-motion version built in.
Make an empty state illustration for a project list with no projects yet. A thin-line isometric folder; every 4 seconds two sheets rise 8px out of it on a soft spring and settle back. Keep it under 160px wide, one accent color from a custom property, everything else in a neutral line color. The heading and Create project button below it never move. With prefers-reduced-motion, show the folder still with one sheet raised. SVG plus CSS only, aria-hidden on the art.
Common questions
What is an empty state in UI design?
An empty state is what a screen shows when it has no content to display: a new account with no projects, a search with no results, a cleared inbox, or a panel whose data failed to load. A good one explains why it is empty and offers a next step.
What should an empty state include?
A short heading that says what is missing, one line on why or what will appear here, and one primary action to fill it. Optionally a small illustration and a secondary link to help docs. NN/g's guidelines sum it up as system status, learning cues and direct pathways.
Should empty states be animated?
They can be, gently. A slow loop or a one-time entrance on the illustration adds warmth, but empty states can stay on screen a long time, so avoid anything fast or bouncy. Never animate the text or button, and respect prefers-reduced-motion.
What is the difference between an empty state and a loading state?
Loading means the data hasn't arrived yet; empty means it arrived and there is nothing. Show a skeleton or spinner while loading and the empty message only after the request completes, otherwise users see a false "No records" flash.
How do you design a no search results page?
Repeat the query, say clearly that nothing matched, and help the user recover: suggest spelling fixes, offer to clear filters, or show best matches under a heading that makes clear they are not exact, as Material's guidelines recommend.