Empty — Vanilla

Empty state with vanilla HTML. Ensure Rizzo CSS is loaded.

Empty

Empty state for no results or empty lists. Use empty__title, empty__description, optional empty__action. Optional slot for icon above title.

Add this component

The command below includes <strong>Empty</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

No items yet

Get started by adding your first item. You can edit or remove it anytime.

HTML

html html 
<div class="empty">
  <h3 class="empty__title">No items yet</h3>
  <p class="empty__description">Get started by adding your first item. You can edit or remove it anytime.</p>
  <div class="empty__action">
    <button type="button" class="btn btn-primary">Add item</button>
  </div>
</div>

Other frameworks: Astro · Svelte · Vue · React