Empty state · result
Empty, error and success screens with small animated drawings — nine kinds, three sizes, a bordered drop-area look and a compact row — each with a title, a line, and what to do next.
Nine kinds · each with its own drawing
No results for “quantum”
Try fewer or different words, or clear the filters.
Small · bordered · compact · your own icon
Drop files here
PNG, JPG or PDF up to 10 MB
No notifications
You're all caught up.
🎉
All tasks done
Nothing left on today's list — new ones will appear here.
Usage
import { EmptyState } from "./components/empty.js"; EmptyState({ kind: "search", title: "No results", description: "Try fewer words.", actions: Button({ label: "Clear filters" }) })// kind: empty · search · inbox · folder · error · offline · lock · 404 · success · cartEmptyState({ kind: "404", size: "lg", title: "Page not found", actions: [homeButton, reportButton] })EmptyState({ kind: "folder", size: "sm", bordered: true, title: "Drop files here" })EmptyState({ compact: true, icon: "🎉", title: "All done", tone: "success" }) // or illustration: yourSvg