Empty states
Four empty states in one illustration whose shapes morph between scenes as you switch tabs.
npm install https://animui.stracture.net/__local/package.tgzNo results for “Q3 roadmap”
Two filters are on: owner is Emma Collins and status is archived.
- A reference for no results, offline, inbox zero, and 404 moments with one shared illustration style.
- Extracting one scene as a richer empty state for a key screen.
- Use empty-state for a simple empty state with an icon, text, and action.
- Use onboarding-illustration for first-run screens that teach the product.
- Use skeleton while content is still loading.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { EmptyStates } from 'animui/empty-states';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this for no results, offline, inbox zero and missing page moments. Wire each action to your real filter reset, retry, refresh or search; the preview simulates them locally.
import { EmptyStates } from "animui/empty-states"; export default function EmptyGallery() { return ( <main> <EmptyStates /> </main> );}EmptyStates
Four empty states (no results, offline, inbox zero, missing page) in one illustration that morphs between scenes via tabs, each with a simulated action. Scene copy is in empty-states.tsx and shapes in empty-states-art.ts.
No props.
- LeftorRight
- Move between scene tabs (wraps around).
- HomeorEnd
- Jump to the first or last scene.
- Scenes use role="tablist", "tab" and "tabpanel" with aria-selected and aria-controls.
- The illustration is a role="img" labelled by the scene; a polite live region reports action results.
- Each shape morphs its path to the next scene with slight per-shape delays, and the tab indicator glides with a layoutId.
- Reduced motion swaps scenes with a short fade and no morph.
- The block is a container query root; from a 560px container the title steps up a size.
- Pointer parallax only turns on for hover-capable fine pointers, so touch devices get a still illustration.
- Shape morphs run on a small requestAnimationFrame loop that stops as soon as every shape settles.
- A ResizeObserver springs the copy height when scenes change.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use as a reference for no results, offline, inbox zero or 404 moments; usually you extract one scene rather than ship the tabbed gallery.
- Actions (clear filters, retry, refresh, search) are simulated; wire them to your real handlers.
- For a single simple empty state, prefer the empty-state component.
The full library index for assistants is at /llms.txt.