Empty state with optional icon, title, description, and action. Matches shadcn-svelte Empty.
Empty
Use for no results, empty lists, or empty search. Slots: icon, default (none), action.
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
bashbash
npx rizzo-css add Empty
bashbash
pnpm dlx rizzo-css add Empty
bashbash
npx rizzo-css add Empty
bashbash
bunx rizzo-css add Empty
Live Example
No items yet
Get started by adding your first item.
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React
astroastro
---
import Empty from '../components/astro/Empty.astro';
---
<Empty title="No items yet" description="Get started by adding your first item.">
<button type="button" slot="action" class="btn btn-primary">Add item</button>
</Empty>
htmlhtml
<!-- Rizzo CSS. No script needed. BEM: empty, empty__icon, empty__title, empty__description, empty__action. -->
<div class="empty">
<h3 class="empty__title">No items yet</h3>
<p class="empty__description">Get started by adding your first item.</p>
<div class="empty__action"><button type="button" class="btn btn-primary">Add item</button></div>
</div>
sveltesvelte
<script>
import { Empty } from '$lib/rizzo';
</script>
<Empty title="No items yet" description="Get started by adding your first item.">
<button type="button" class="btn btn-primary">Add item</button>
</Empty>
vuevue
<script setup>
import Empty from '@/components/rizzo/Empty.vue';
import Button from '@/components/rizzo/Button.vue';
</script>
<template>
<Empty>
<h3 class="empty__title">No items yet</h3>
<p class="empty__description">Get started by adding your first item.</p>
<div class="empty__action">
<Button variant="primary">Add item</Button>
</div>
</Empty>
</template>
tsxtsx
import { Empty } from './components/react';
import { Button } from './components/react';
<Empty
title="No items yet"
description="Get started by adding your first item."
action={<Button variant="primary">Add item</Button>}
/>
npm 
pnpm 
yarn 
bun