3 variants

Empty State

What a screen shows before there is anything on it: what goes here, and the fastest way to put the first thing in.

Centered

A small fanned stack of cards with the mark on top, one line on what belongs here, and a primary and secondary action.

No projects yet

Projects keep your pages, assets and deploys together. Create one to get going.

Import from GitHub

Not sure where to start? Read the quick start.

page.tsx

import { EmptyStateCentered } from "@/components/blocks/empty-state-centered";

export default function Page() {
  return (
    <EmptyStateCentered
      title="No projects yet"
      description="Create one to get going."
      primaryAction={{ label: "New project", href: "/projects/new" }}
      secondaryAction={{ label: "Import from GitHub", href: "/import" }}
    />
  );
}

"use client";

import { ArrowRight, Inbox } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface EmptyStateAction {
  label: string;
  href?: string;
  onClick?: () => void;

112 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/empty-state-centered

Templates

An empty workspace that offers a head start: starter cards inside a dashed frame, and a quiet way to begin from blank.

Your workspace is empty

Start from a template and have something real on screen in a minute.

page.tsx

import { EmptyStateTemplates } from "@/components/blocks/empty-state-templates";

export default function Page() {
  return (
    <EmptyStateTemplates
      title="Your workspace is empty"
      templates={[
        { id: "landing", title: "Launch page", description: "Hero, features, pricing.", href: "/new?t=landing" },
      ]}
      blankAction={{ label: "Start from blank", href: "/new" }}
    />
  );
}

"use client";

import { ArrowUpRight, Plus } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface StarterTemplate {
  id: string;
  title: string;
  description: string;

113 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/empty-state-templates

No results

A search that came back empty. It quotes the query back, lets each filter be removed on its own, and offers suggestions and somewhere popular to go instead.

No results for “invoice timeline”

Your filters may be hiding what you are after. Remove one, or try different words.

Try searching for

Popular right now

page.tsx

import { EmptyStateSearch } from "@/components/blocks/empty-state-search";

export default function Page() {
  return (
    <EmptyStateSearch
      query="invoice timeline"
      suggestions={["pricing", "billing"]}
      filters={["Blocks"]}
      onSearch={(query) => router.push("/search?q=" + encodeURIComponent(query))}
    />
  );
}

"use client";

import { ArrowUpRight, Search, SearchX, X } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type FormEvent, useId, useState } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface EmptyStateSearchProps {
  /** What was searched for. It is shown back, quoted, so the reader can spot a typo. */
  query: string;
  /** Other things to try, as one click chips. */

177 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/empty-state-search