# Empty State 01 - No Data Empty State

> Help users understand why content is missing instead of displaying a blank screen. Perfect for new projects, dashboards, and first-time experiences that encourage the creation of project action.

A shadcn/ui block from the [@shadcn-dashboard](https://shadcndashboard.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-dashboard/no-data-empty-state).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-dashboard/no-data-empty-state
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-dashboard/no-data-empty-state-light-28cabece59e7e09c.png
- Registry item: https://shadcndashboard.dev/r/no-data-empty-state.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcndashboard.dev/r/no-data-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: `lucide-react`
- Registry items: `card`, `empty`, `button`

## Files

### `src/components/shadcn-dashboard/blocks/empty-state/no-data-empty-state.tsx`

```tsx
"use client";

import { Plus } from "lucide-react";
import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from "@/components/ui/empty";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

const NoDataEmptyState = () => {
  return (
    <Card className="w-full max-w-md">
      <CardContent>
        <Empty>
          <EmptyHeader>
            <EmptyMedia variant="icon">
              <Plus />
            </EmptyMedia>

            <EmptyTitle className="text-base">No projects yet</EmptyTitle>
            <EmptyDescription className="text-sm">
              Start your first project to see it here.
            </EmptyDescription>
          </EmptyHeader>

          <EmptyContent>
            <Button className="gap-1.5">
              <Plus className="size-3.5" />
              Create Project
            </Button>
          </EmptyContent>
        </Empty>
      </CardContent>
    </Card>
  );
};

export default NoDataEmptyState;
```