# Empty State 01

> A simple empty state block

A shadcn/ui block from the [@shadcnui-blocks](https://shadcnui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnui-blocks/empty-state-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcnui-blocks/empty-state-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnui-blocks/empty-state-01-light-0c0ded057614771a.png
- Registry item: https://shadcnui-blocks.com/r/empty-state-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/empty-state-01.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`, `button`

## Files

### `src/registry/blocks/radix/empty-state-01/components/empty-state.tsx`

```tsx
import { Folders, ImportIcon, PlusIcon } from "lucide-react";
import { Button } from "@/registry/bases/radix/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/registry/bases/radix/ui/card";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/registry/bases/radix/ui/empty";

export default function EmptyState() {
  return (
    <div className="px-6 py-10">
      <Card className="mx-auto max-w-sm pt-0">
        <CardHeader className="rounded-t-xl border-b bg-muted py-5!">
          <CardTitle>Projects</CardTitle>
          <CardDescription>Your projects across all platforms.</CardDescription>
        </CardHeader>
        <CardContent>
          <Empty className="px-0 py-8 md:px-0 md:py-8">
            <EmptyHeader>
              <EmptyMedia variant="icon">
                <Folders />
              </EmptyMedia>
              <EmptyTitle>No Projects Yet</EmptyTitle>
              <EmptyDescription>
                You haven&apos;t created any projects yet. Get started by
                creating your first project.
              </EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
              <div className="flex flex-wrap gap-2 *:mx-auto">
                <Button>
                  <PlusIcon /> Create Project
                </Button>
                <Button variant="outline">
                  <ImportIcon /> Import Project
                </Button>
              </div>
            </EmptyContent>
          </Empty>
        </CardContent>
      </Card>
    </div>
  );
}
```