# Empty State

> An empty state with a buddy, a short message and one clear next step, for lists and boards with nothing in them yet.

A shadcn/ui block from the [@plopui](https://plopui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/plopui/empty-state).

- Page, with a live preview: https://shadcn.exchange/r/plopui/empty-state
- Screenshot: https://shadcn.exchange/shot/plopui/empty-state/light.png
- Registry item: https://plopui.com/r/empty-state.json
- Categories: blocks
- Listed: 2026-11-05, source last changed 2026-11-05

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/plopui/empty-state.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@plop-ui/fonts`, `@plop-ui/react`
- Registry items: `https://plopui.com/r/plop-setup.json`

## Files

### `registry/plopui/empty-state.tsx`

```tsx
"use client";

import type { CSSProperties } from "react";
import { Buddy, Button, Heading, type BuddyMood } from "@plop-ui/react";

export interface EmptyStateBlockProps {
  title?: string;
  message?: string;
  actionLabel?: string;
  onAction?: () => void;
  mood?: BuddyMood;
}

/** An empty state with a buddy, a short message and one clear next step, for lists and boards with nothing in them yet. */
export function EmptyStateBlock({
  title = "Nothing here yet",
  message = "Your sketchbook is empty. Start with one quick doodle; it doesn't have to be good.",
  actionLabel = "Post your first sketch",
  onAction,
  mood = "preview",
}: EmptyStateBlockProps) {
  return (
    <section style={wrap} aria-labelledby="plop-empty-title">
      <Buddy mood={mood} size="lg" />
      <Heading level={3} id="plop-empty-title">
        {title}
      </Heading>
      <p style={text}>{message}</p>
      <Button variant="ink" burst onClick={onAction}>
        {actionLabel}
      </Button>
    </section>
  );
}

const wrap: CSSProperties = { display: "grid", justifyItems: "center", gap: 14, padding: "40px 24px", textAlign: "center", maxWidth: 420, margin: "0 auto" };
const text: CSSProperties = { margin: "0 0 10px", color: "var(--plop-on-soft)" };
```