Empty - Kumo

No packages found

Get started by installing your first package.

$npm install @cloudflare/kumo

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

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

<Empty size="sm" icon={...} title="..." description="..." />
<Empty size="base" icon={...} title="..." description="..." />
<Empty size="lg" icon={...} title="..." description="..." />

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

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

<Empty 
  icon={<CloudSlash size={48} className="text-kumo-inactive" />}
  title="No connection"
  description="Unable to connect to the server."
  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

<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()`.