Empty state
A useful next step when there is nothing to show yet.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Empty lists, zero search results, and first-run views.
- A view that should morph between states, such as empty and success, by changing props.
- Use skeleton while data is still loading.
- Use alert for errors inside a page that still has content.
- Use onboarding-checklist when first-run needs several steps.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
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 { EmptyState } from 'animui/empty-state';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { Search } from "lucide-react";import { Button } from "animui/button";import { EmptyState } from "animui/empty-state"; export function NoResults({ onClear }: { onClear: () => void }) { return ( <EmptyState icon={<Search size={24} />} title="No matches" description="Try a shorter search or clear the filters." action={<Button variant="secondary" onClick={onClear}>Clear filters</Button>} /> );}EmptyState
A centered icon, title, description, and optional action for empty views.
PropTypeDefaultDescription
titleRequiredstring–Headline. A new title rises in while the old one leaves.descriptionRequiredstring–One or two sentences on why it is empty and what to do.actionReactNode–Call to action, usually a button.iconReactNode<Folder />Leading icon. A different icon component crossfades in.classNamestring–Class for the root section.labelstring–Accessible name for the section region.- Renders a section with an h3 title; pass label to name the region.
- The icon is aria-hidden.
- Outgoing copy is hidden from assistive tech while it fades.
- Changing title or description rolls the copy in place while the block height springs to fit.
- A new icon pops in with a short blur.
- Reduced motion swaps copy with a fade and snaps height; the icon's idle animation stops.
- Padding scales with the viewport between fixed bounds, and the description caps at 18rem so lines stay short.
- Actions wrap and center, so two buttons stack on narrow screens.
- One ResizeObserver drives the height spring; the icon's idle animation is CSS and stops under reduced motion.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for empty lists, zero search results, and first-run views. Use skeleton while data is loading.
- Keep it mounted and change its props to morph between states such as empty and success.
The full library index for assistants is at /llms.txt.