Skip to content

Tools — 18

An empty state is a first impression wearing the wrong clothes.

'No results found.' Three words, zero help. A good empty state names what happened, says what the person can do about it, and offers a way forward — in the same voice as the rest of the product. This generates that copy for five common categories, previews it in a real layout, and exports it as a Vue or React component.

Category

Empty-state category

The collection is empty — nothing to show yet.

Preview

Icon

Nothing here yet.

This is where your items will appear once you create them. Start with your first one — it only takes a moment.

Export

Component format

Vue SFC
<template>
  <div class="empty-state">
    <div class="empty-state__icon" aria-hidden="true">
      <!-- Lucide: inbox (ISC License) -->
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
        <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
      </svg>
    </div>

    <h2 class="empty-state__headline">{{ headline }}</h2>
    <p class="empty-state__body">{{ body }}</p>

    <button
      v-if="ctaLabel"
      class="empty-state__cta"
      @click="$emit('action')"
    >
      {{ ctaLabel }}
    </button>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  headline?: string
  body?: string
  ctaLabel?: string
}>(), {
  headline: 'Nothing here yet.',
  body: 'This is where your items will appear once you create them. Start with your first one — it only takes a moment.',
  ctaLabel: 'Create your first item',
})

defineEmits<{ action: [] }>()
</script>

Reference

An effective empty state names what happened, explains what the user can do, and offers a single clear action. The five common categories are no-data, no-results, error, first-use and permission-denied, each with a different tone and intent.

What makes a good empty state?

Three elements: a headline that names the situation without blame, a body that explains what the user can do about it, and a CTA that provides the obvious next step. The icon or illustration is optional but anchors the layout.

The mistake is treating all five categories the same. "No results" should offer to clear filters; "error" should offer to retry; "first-use" should offer to begin setup. The action is the content.

What are the five empty-state categories?

No-data: the collection is genuinely empty and the user needs to create the first item. No-results: a search or filter returned nothing and the user needs to broaden it. Error: something failed and the user needs to retry or report.

First-use: the feature has never been configured and the user needs to complete setup. Permission-denied: the user's role does not include this page and they need to request access or contact an admin.

Why does this tool export as a component, not just copy?

Because empty states recur across an application and should be a reusable component, not copy-pasted prose. The exported Vue or React component accepts headline, body and CTA as props, so each instance can be customised without duplicating the layout.

Common questions

Should empty states have illustrations?
They can, but a simple icon is usually sufficient and far cheaper to produce. An illustration that does not match the product's visual language is worse than no illustration at all.
Can I edit the generated copy?
Yes. The headline, body and CTA are all editable fields. The generator provides a starting point; the final tone should match the product's voice.
Does this tool generate multiple variants?
Yes, three per category. Use the "Next variant" button to cycle through them. Each variant has a different tone — from straightforward to slightly warmer — so you can pick the register that fits.

Sources