Empty - Kumo

No packages found

Get started by installing your first package.

$npm install @cloudflare/kumo

import { Empty, Button } from "@cloudflare/kumo";
import { PackageIcon, CodeIcon, GlobeIcon } from "@phosphor-icons/react";

export function EmptyDemo() {
  return (
    <Empty
      icon={<PackageIcon size={48} />}
      title="No packages found"
      description="Get started by installing your first package."
      commandLine="npm install @cloudflare/kumo"
      contents={
        <div className="flex items-center gap-2">
          <Button icon={<CodeIcon />}>See examples</Button>
          <Button icon={<GlobeIcon />} variant="primary">
            View documentation
          </Button>
        </div>
      }
    />
  );
}

Installation

import { Empty } from "@cloudflare/kumo";

Usage

import { Empty } from "@cloudflare/kumo";
import { PackageIcon } from "@phosphor-icons/react";

export default function Example() {
  return (
    <Empty
      icon={<PackageIcon size={48} />}
      title="No packages found"
      description="Get started by installing your first package."
      commandLine="npm install @kumo/ui"
    />
  );
}

Examples

Basic

No results found

Try adjusting your search or filter to find what you're looking for.

import { Empty } from "@cloudflare/kumo";

export function EmptyBasicDemo() {
  return (
    <Empty
      title="No results found"
      description="Try adjusting your search or filter to find what you're looking for."
    />
  );
}

Sizes

Empty states come in three sizes to fit different container contexts.

Small

No data available

There is no data to display.

Base

No data available

There is no data to display.

Large

No data available

There is no data to display.

import { Empty } from "@cloudflare/kumo";
import { Database } from "@phosphor-icons/react";

export function EmptySizesDemo() {
  return (
    <div className="flex flex-col gap-8">
      <div>
        <p className="mb-2 text-sm text-kumo-subtle">Small</p>
        <Empty
          size="sm"
          icon={<Database size={32} className="text-kumo-inactive" />}
          title="No data available"
          description="There is no data to display."
        />
      </div>
      <div>
        <p className="mb-2 text-sm text-kumo-subtle">Base</p>
        <Empty
          size="base"
          icon={<Database size={48} className="text-kumo-inactive" />}
          title="No data available"
          description="There is no data to display."
        />
      </div>
      <div>
        <p className="mb-2 text-sm text-kumo-subtle">Large</p>
        <Empty
          size="lg"
          icon={<Database size={64} className="text-kumo-inactive" />}
          title="No data available"
          description="There is no data to display."
        />
      </div>
    </div>
  );
}

With Command Line

Include a copyable command to help users get started.

No projects found

Get started by creating your first project using the command below.

$npm create kumo-project

import { Empty } from "@cloudflare/kumo";
import { FolderOpen } from "@phosphor-icons/react";

export function EmptyWithCommandDemo() {
  return (
    <Empty
      icon={<FolderOpen size={48} className="text-kumo-inactive" />}
      title="No projects found"
      description="Get started by creating your first project using the command below."
      commandLine="npm create kumo-project"
    />
  );
}

With Actions

Add custom action buttons using the contents prop.

No connection

Unable to connect to the server. Please check your connection and try again.

import { Empty, Button } from "@cloudflare/kumo";
import { CloudSlash } from "@phosphor-icons/react";

export function EmptyWithActionsDemo() {
  return (
    <Empty
      icon={<CloudSlash size={48} className="text-kumo-inactive" />}
      title="No connection"
      description="Unable to connect to the server. Please check your connection and try again."
      contents={
        <div className="flex gap-2">
          <Button variant="primary">Retry</Button>
          <Button variant="secondary">Go Back</Button>
        </div>
      }
    />
  );
}

Minimal

At minimum, only a title is required.

Nothing here

import { Empty } from "@cloudflare/kumo";

export function EmptyMinimalDemo() {
  return <Empty title="Nothing here" />;
}

API Reference

Prop	Type	Default	Description
size	`"sm" \| "base" \| "lg"`	`"base"`	Size of the empty state container. - `"sm"` — Compact empty state for smaller containers - `"base"` — Default empty state size - `"lg"` — Large empty state for prominent placement
icon	`ReactNode`	-	Decorative icon displayed above the title (e.g. from `@phosphor-icons/react`).
title*	`string`	-	Primary heading text for the empty state.
description	`string`	-	Secondary description text displayed below the title.
commandLine	`string`	-	Shell command displayed in a copyable code block.
contents	`ReactNode`	-	Additional content (buttons, links) rendered below the description.
className	`string`	-	Additional CSS classes merged via `cn()`.