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

Copy and paste the following code into your project.

import { Empty } from "~/blocks/empty";

Usage

import { Empty } from "~/blocks/empty";
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."
/>

With Icon

Ready to launch

Deploy your application to production with a single command.

<Empty
  icon={<RocketIcon size={48} />}
  title="Ready to launch"
  description="Deploy your application to production with a single command."
/>

With Command Line

No dependencies installed

Install dependencies to get started with your project.

$npm install

<Empty
  icon={<PackageIcon size={48} />}
  title="No dependencies installed"
  description="Install dependencies to get started with your project."
  commandLine="npm install"
/>

With Custom Content

No projects yet

Create your first project to get started.

<Empty
  icon={<PackageIcon size={48} />}
  title="No projects yet"
  description="Create your first project to get started."
  contents={
    <Button variant="primary" icon={RocketIcon}>
      Create Project
    </Button>
  }
/>

API Reference

Prop	Type	Default
icon	React.ReactNode	undefined
title	string	required
description	string	undefined
commandLine	string	undefined
contents	React.ReactNode	undefined

Kumo

Empty State