Empty

Empty is the successful no-content placeholder for pages and regions — title, optional description, visual, and action. It follows Ant Design Empty semantics. Prefer Empty when the request succeeded and there is simply nothing to show; use Result for failures and outcomes, and keep list/chat chrome empties (Data List, Message Scroller) inside those hosts. See Page Region Status for when Empty sits in the Loading / Empty / Error triad.

When To Use

• Show a successful empty list, panel, or page when the fetch succeeded and the collection has no items.
• Pair a short description and optional action (Create, Upload, Clear filters) so the user knows the next step.
• Use size="region" (default) inside cards and panels; use size="page" for a full-page empty band.
• Do not use Empty for errors, 404s, or failed requests — use Result (and Skeleton for pending); host-branch the triad per Page Region Status.
• Do not replace DataListEmpty or MessageScrollerEmpty — those stay owned by their list/chat hosts.

Features

Installing

pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/empty.json

npx shadcn@latest add https://ui.isaacfei.com/r/empty.json

yarn dlx shadcn@latest add https://ui.isaacfei.com/r/empty.json

bun x shadcn@latest add https://ui.isaacfei.com/r/empty.json

With a namespace: npx shadcn@latest add @f-ui/empty.

registryDependencies: utils. Runtime: lucide-react.

Usage

import { Empty } from "@/components/f-ui/empty/empty";

<Empty description="When this list has items, they will show up here." />

Examples

Region Empty

Default size="region" inside a card — title defaults to “No data” with a short description for an empty list.

"use client";

import { Empty } from "@/components/f-ui/empty/empty";

export function EmptyDemo() {
  return (
    <div className="rounded-xl border bg-card">
      <Empty description="When this list has items, they will show up here." />
    </div>
  );
}

With Action

Add a primary next step in action so the empty state points the user forward (Upload, Create, Clear filters).

"use client";

import { Empty } from "@/components/f-ui/empty/empty";
import { Button } from "@/components/ui/button";

export function EmptyWithActionDemo() {
  return (
    <div className="rounded-xl border bg-card">
      <Empty
        title="No files yet"
        description="Upload a file to see it here."
        action={
          <Button type="button">
            Upload
          </Button>
        }
      />
    </div>
  );
}

Page Empty

size="page" uses a taller band and larger icon for full-page no-content — for example a projects index with nothing yet.

"use client";

import { Empty } from "@/components/f-ui/empty/empty";
import { Button } from "@/components/ui/button";

export function EmptyPageDemo() {
  return (
    <Empty
      size="page"
      title="No projects yet"
      description="Create a project to start collaborating."
      action={
        <Button type="button">Create project</Button>
      }
    />
  );
}

Composition

Empty
├── image / icon (default Inbox, or `image` / `icon`)
├── title (h2, default "No data")
├── description? (optional)
└── action? (optional action row)

When children is passed, Empty renders only the children inside the sized root (no default title / description / action).

API Reference

Props

Slots