# Empty Error Retry — React Empty State

> A failed-to-load state with a flickering unplugged-cable drawing and a retry button that spins, fails once with a shake, then reconnects with a spark.

- Category: [Empty States](https://pixelpapa.com/components/empty-states.md)
- Tags: empty-state, error, retry, loading, offline
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/empty-states/empty-error-retry

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/empty-error-retry
```

The file is written to `components/pixelpapa/empty-error-retry.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/empty-states/empty-error-retry.

## AI prompt

```text
Add the "Empty Error Retry" component from PixelPapa UI to this project.

What it is: A failed-to-load state with a flickering unplugged-cable drawing and a retry button that spins, fails once with a shake, then reconnects with a spark.
Category: Empty States. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/empty-error-retry
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/empty-error-retry.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/empty-error-retry.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/empty-error-retry" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More empty states

- [Empty First Project](https://pixelpapa.com/components/empty-states/empty-first-project.md): A first-run dropzone whose dashed border marches, tightens and tints while a file is dragged over it, with a primary action and starter templates.
- [Empty Inbox Illustration](https://pixelpapa.com/components/empty-states/empty-inbox-illustration.md): An inbox-zero state with an animated SVG tray: a paper plane loops overhead on a dashed trail while the tray bobs and sparkles blink.
- [Empty Search No Results](https://pixelpapa.com/components/empty-states/empty-search-no-results.md): A no-results state with a scanning magnifier, a working search field and suggestion chips that stagger in and fill the query when clicked.