KV Namespaces

Store key-value data globally with low-latency access

production-kv

Created 2 days ago

staging-kv

Created 1 week ago

Usage Example

// Read from KV
const value = await KV.get('key');

// Write to KV
await KV.put('key', 'value');

Learn More

Check out our documentation to learn more about KV storage.

<ResourceListPage
  title="KV Namespaces"
  description="Store key-value data globally with low-latency access"
  icon={<DatabaseIcon size={32} className="text-kumo-strong" />}
  usage={
    <Surface className="p-4">
      <h3 className="mb-2 font-semibold">Usage Example</h3>
      <Code lang="ts" code={`// Read from KV
const value = await KV.get('key');`} />
    </Surface>
  }
  additionalContent={
    <Surface className="p-4">
      <h3 className="mb-2 font-semibold">Learn More</h3>
      <p className="text-sm text-kumo-strong">
        Check out our documentation to learn more about KV storage.
      </p>
    </Surface>
  }
>
  <div className="space-y-4">
    <Surface className="p-6">
      <h4 className="mb-2 font-semibold">production-kv</h4>
      <p className="text-sm text-kumo-strong">Created 2 days ago</p>
    </Surface>
  </div>
</ResourceListPage>

Installation

ResourceListPage is a block - a CLI-installed component that you own and can customize. Unlike regular components, blocks are copied into your project so you have full control over the code.

1. Initialize Kumo config (first time only)

npx @cloudflare/kumo init

2. Install the block

npx @cloudflare/kumo add ResourceListPage

3. Import from your local path

// The path depends on your kumo.json blocksDir setting
// Default: src/components/kumo/
import { ResourceListPage } from "./components/kumo/resource-list/resource-list";

Why blocks? Blocks give you full ownership of the code, allowing you to customize layouts to fit your specific needs. They're ideal for page-level patterns that often need project-specific modifications.

Usage

import { ResourceListPage } from "./components/kumo/resource-list/resource-list";
import { Surface } from "@cloudflare/kumo";
import { DatabaseIcon } from "@phosphor-icons/react";

export default function DatabasesPage() {
  return (
    <ResourceListPage
      title="Databases"
      description="Manage your database instances and configurations"
      icon={<DatabaseIcon size={32} className="text-kumo-strong" />}
    >
      <Surface className="p-6">
        {/* Your resource list content */}
      </Surface>
    </ResourceListPage>
  );
}

Examples

Basic

A minimal resource list page with title, description, and icon.

Databases

Manage your database instances and configurations

Main content area - your resource list would go here

<ResourceListPage
  title="Databases"
  description="Manage your database instances and configurations"
  icon={<DatabaseIcon size={32} className="text-kumo-strong" />}
>
  <Surface className="p-6">
    <p>Main content area - your resource list would go here</p>
  </Surface>
</ResourceListPage>

With Usage Sidebar

Include a sidebar with usage examples or quick start guides.

API Keys

Create and manage API keys for your applications

API keys list would appear here

Quick Start

Generate an API key to authenticate your requests

curl -H "Authorization: Bearer YOUR_API_KEY" https://api.example.com

<ResourceListPage
  title="API Keys"
  description="Create and manage API keys for your applications"
  usage={
    <Surface className="p-4">
      <h3 className="mb-2 font-semibold">Quick Start</h3>
      <p className="mb-3 text-sm text-kumo-strong">
        Generate an API key to authenticate your requests
      </p>
      <Code
        lang="bash"
        code='curl -H "Authorization: Bearer YOUR_API_KEY" https://api.example.com'
      />
    </Surface>
  }
>
  <Surface className="p-6">
    <p>API keys list would appear here</p>
  </Surface>
</ResourceListPage>

API Reference

Property	Type	Description
title	string	Page title displayed at the top
description	string	Page description below the title
icon	ReactNode	Icon displayed next to the title
usage	ReactNode	Sidebar content for usage examples or quick start guides
additionalContent	ReactNode	Additional sidebar content (e.g., resources, links)
children	ReactNode	Main content area for the resource list
className	string	Additional CSS classes

Kumo