Empty State CSS-only

About

Overview

Use an empty state when a list, table, or section has no content yet. The structure is rigid for a reason — it makes empty pages feel intentional instead of broken: a small illustration, a one-line headline ("No invoices yet"), one short paragraph of context, and a single primary action to get started.

Live

Demo

<div class="ren-empty-state">
  <div class="ren-empty-state-icon">
    <!-- SVG illustration -->
  </div>
  <h2 class="ren-empty-state-title">No projects yet</h2>
  <p class="ren-empty-state-desc">
    Projects are how you organize your work. Create one to start
    inviting collaborators and tracking progress.
  </p>
  <button class="ren-btn ren-btn-primary">Create your first project</button>
</div>

Reference

API

Variants

• First run — the default. "Get started" tone.
• Search returned nothing — different copy. "No results for 'foo'. Try a different keyword."
• Filtered out — "All your items are in another tab. Clear filters to see them."
• Permission — "You don't have access. Ask an admin to invite you."

Inclusive by default

Accessibility

• The illustration is decorative — wrap it in aria-hidden="true" so screen readers skip it.
• The headline is a real <h2> or <h3> at the appropriate document level. Don't use a styled <p>.
• The action button is reachable by Tab. If there's just one action, make it the page's primary CTA.
• Don't replace the empty state with a permanent loading spinner — show a skeleton during load, then the empty state when the response arrives.