Empty
A placeholder for empty states — icon, title, description, and an action.
No messages
You're all caught up. New messages will show up here.
<script lang="ts">
import Icon from "@iconify/svelte";
import {
Empty,
EmptyMedia,
EmptyTitle,
EmptyDescription
} from "$lib/components/ui/empty";
import { Button } from "$lib/components/ui/button";
</script>
<Empty class="max-w-sm">
<EmptyMedia>
<Icon icon="heroicons:inbox-solid" aria-hidden="true" />
</EmptyMedia>
<EmptyTitle>No messages</EmptyTitle>
<EmptyDescription
>You're all caught up. New messages will show up here.</EmptyDescription
>
<Button size="sm" variant="ghost" class="mt-2">Refresh</Button>
</Empty>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest init