# Empty State 04

> 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-04).

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

## Install

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

## Files

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

```tsx
import { FolderCheck, ImportIcon, PlusIcon } from "lucide-react";
import { Marquee } from "@/components/magicui/marquee";
import { Button } from "@/registry/bases/radix/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "@/registry/bases/radix/ui/empty";

export default function EmptyState() {
  return (
    <div className="px-6 py-10">
      <div className="mx-auto max-w-sm pt-0">
        <Empty className="px-0 py-8 md:px-0 md:py-8">
          <EmptyHeader>
            <div className="mask-y-from-60% mask-x-from-95% mb-3 w-full max-w-xs space-y-2">
              <Marquee className="h-56 [--duration:2s]" repeat={5} vertical>
                <div className="flex w-full items-center gap-3 rounded-lg border px-4 py-3">
                  <FolderCheck className="shrink-0 fill-muted text-muted-foreground/70" />
                  <div className="h-5 w-full rounded-lg bg-muted" />
                  <div className="ms-auto size-6 shrink-0 rounded-full bg-muted" />
                </div>
              </Marquee>
            </div>
            <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>
      </div>
    </div>
  );
}
```

### `src/registry/blocks/radix/empty-state-04/components/magicui/marquee.tsx`

```tsx
import type { ComponentPropsWithoutRef } from "react";
import { cn } from "@/lib/utils";

interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
  /**
   * Optional CSS class name to apply custom styles
   */
  className?: string;
  /**
   * Whether to reverse the animation direction
   * @default false
   */
  reverse?: boolean;
  /**
   * Whether to pause the animation on hover
   * @default false
   */
  pauseOnHover?: boolean;
  /**
   * Content to be displayed in the marquee
   */
  children: React.ReactNode;
  /**
   * Whether to animate vertically instead of horizontally
   * @default false
   */
  vertical?: boolean;
  /**
   * Number of times to repeat the content
   * @default 4
   */
  repeat?: number;
}

export function Marquee({
  className,
  reverse = false,
  pauseOnHover = false,
  children,
  vertical = false,
  repeat = 4,
  ...props
}: MarqueeProps) {
  return (
    <div
      {...props}
      className={cn(
        "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
        {
          "flex-row": !vertical,
          "flex-col": vertical,
        },
        className
      )}
    >
      {Array(repeat)
        .fill(0)
        .map((_, i) => (
          <div
            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
              "animate-marquee flex-row": !vertical,
              "animate-marquee-vertical flex-col": vertical,
              "group-hover:[animation-play-state:paused]": pauseOnHover,
              "[animation-direction:reverse]": reverse,
            })}
            key={i}
          >
            {children}
          </div>
        ))}
    </div>
  );
}
```