Manicat UI

Empty states

Four empty states in one illustration whose shapes morph between scenes as you switch tabs.

Preview
Empty states preview

No results for “Q3 roadmap”

Two filters are on: owner is Emma Collins and status is archived.

When to use

  • 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.

When not to use

  • 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.

shadcn CLI

Also installs (2)

  • manicat-foundation
  • button
Manual install(+)
registry.jsonjson
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-states",
  "type": "registry:block",
  "title": "Empty states",
  "description": "Four empty states in one illustration whose shapes morph between scenes as you switch tabs.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json",
    "https://manicat.viraza.net/r/button.json"
  ],
  "files": [
    {
      "path": "registry/blocks/empty-states/empty-states.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/empty-states/empty-states.tsx"
    },
    {
      "path": "registry/blocks/empty-states/empty-states.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/empty-states/empty-states.module.css"
    },
    {
      "path": "registry/blocks/empty-states/empty-states-art.ts",
      "type": "registry:component",
      "target": "@components/manicat/blocks/empty-states/empty-states-art.ts"
    },
    {
      "path": "registry/components/button/button.tsx",
      "type": "registry:component",
      "target": "@components/manicat/button/button.tsx"
    },
    {
      "path": "registry/components/button/button.module.css",
      "type": "registry:component",
      "target": "@components/manicat/button/button.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/empty-states",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/empty-states",
    "markdown": "https://uiarc.dev/components/blocks/empty-states/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx
"use client";

import { EmptyStates } from "manicat/registry/blocks/empty-states/empty-states";

export function EmptyStatesExample() {
  return <EmptyStates />;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Empty states Pick the illustration that fits: no results, no data, offline.

Empty states Pick the illustration that fits: no results, no data, offline. preview

No results for “Q3 roadmap”

Two filters are on: owner is Emma Collins and status is archived.

Keyboard interactions

KeysAction
Left / RightMove between scene tabs (wraps around).
Home / EndJump to the first or last scene.

Accessibility

  • 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.

Motion

  • 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.

Responsive behavior

  • 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.

Performance

  • 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

  • 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.