Kumo Svelte
kumo-svelte

Resource List

A layout block for resource list pages with optional sidebar content.

KV Namespaces

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 the documentation to learn more about KV storage.

<script lang="ts">
  import DatabaseIcon from "phosphor-svelte/lib/DatabaseIcon";
  import { CodeBlock } from "kumo-svelte/components/code";
  import { Surface } from "kumo-svelte/components/surface";
  import ResourceListDemoShell from "./resource-list-demo-shell.svelte";

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

// Write to KV
await KV.put('key', 'value');`;
</script>

<ResourceListDemoShell title="KV Namespaces" description="Store key-value data globally with low-latency access">
  {#snippet icon()}
    <DatabaseIcon class="size-8 text-kumo-subtle" />
  {/snippet}
  {#snippet usage()}
    <Surface class="p-4">
      <h3 class="mb-2 font-semibold">Usage Example</h3>
      <CodeBlock lang="ts" code={code} />
    </Surface>
  {/snippet}
  {#snippet additionalContent()}
    <Surface class="p-4">
      <h3 class="mb-2 font-semibold">Learn More</h3>
      <p class="text-sm text-kumo-subtle">Check out the documentation to learn more about KV storage.</p>
    </Surface>
  {/snippet}
  <div class="space-y-4">
    <Surface class="p-6">
      <h4 class="mb-2 font-semibold">production-kv</h4>
      <p class="text-sm text-kumo-subtle">Created 2 days ago</p>
    </Surface>
    <Surface class="p-6">
      <h4 class="mb-2 font-semibold">staging-kv</h4>
      <p class="text-sm text-kumo-subtle">Created 1 week ago</p>
    </Surface>
  </div>
</ResourceListDemoShell>

Usage

Compose resource list pages from Surface and page-level layout markup.

<script lang="ts">
  import DatabaseIcon from "phosphor-svelte/lib/DatabaseIcon";
  import { Surface } from "kumo-svelte/components/surface";
</script>

<div class="min-h-[400px] bg-kumo-overlay p-6">
  <header class="mb-6">
    <div class="flex items-center gap-1.5">
      <DatabaseIcon class="size-8 text-kumo-subtle" />
      <h1 class="m-0 text-3xl font-semibold">Databases</h1>
    </div>
    <p class="text-kumo-subtle">Manage your database instances and configurations.</p>
  </header>

  <Surface class="p-6">Your resource list content</Surface>
</div>

Examples

Basic

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

Databases

Main content area — your resource list would go here.

<script lang="ts">
  import DatabaseIcon from "phosphor-svelte/lib/DatabaseIcon";
  import { Surface } from "kumo-svelte/components/surface";
  import ResourceListDemoShell from "./resource-list-demo-shell.svelte";
</script>

<ResourceListDemoShell title="Databases" description="Manage your database instances and configurations">
  {#snippet icon()}
    <DatabaseIcon class="size-8 text-kumo-subtle" />
  {/snippet}
  <Surface class="p-6">
    <p>Main content area — your resource list would go here.</p>
  </Surface>
</ResourceListDemoShell>

With Usage Sidebar

Include a sidebar with usage examples or quick-start guides.

API Keys

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
<script lang="ts">
  import { CodeBlock } from "kumo-svelte/components/code";
  import { Surface } from "kumo-svelte/components/surface";
  import ResourceListDemoShell from "./resource-list-demo-shell.svelte";

  const command = 'curl -H "Authorization: Bearer YOUR_API_KEY" https://api.example.com';
</script>

<ResourceListDemoShell title="API Keys" description="Create and manage API keys for your applications">
  {#snippet usage()}
    <Surface class="p-4">
      <h3 class="mb-2 font-semibold">Quick Start</h3>
      <p class="mb-3 text-sm text-kumo-subtle">Generate an API key to authenticate your requests.</p>
      <CodeBlock lang="bash" code={command} />
    </Surface>
  {/snippet}
  <Surface class="p-6">
    <p>API keys list would appear here.</p>
  </Surface>
</ResourceListDemoShell>

Complete Example

KV Namespaces

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 the documentation to learn more about KV storage.

<script lang="ts">
  import DatabaseIcon from "phosphor-svelte/lib/DatabaseIcon";
  import { CodeBlock } from "kumo-svelte/components/code";
  import { Surface } from "kumo-svelte/components/surface";
  import ResourceListDemoShell from "./resource-list-demo-shell.svelte";

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

// Write to KV
await KV.put('key', 'value');`;
</script>

<ResourceListDemoShell title="KV Namespaces" description="Store key-value data globally with low-latency access">
  {#snippet icon()}
    <DatabaseIcon class="size-8 text-kumo-subtle" />
  {/snippet}
  {#snippet usage()}
    <Surface class="p-4">
      <h3 class="mb-2 font-semibold">Usage Example</h3>
      <CodeBlock lang="ts" code={code} />
    </Surface>
  {/snippet}
  {#snippet additionalContent()}
    <Surface class="p-4">
      <h3 class="mb-2 font-semibold">Learn More</h3>
      <p class="text-sm text-kumo-subtle">Check out the documentation to learn more about KV storage.</p>
    </Surface>
  {/snippet}
  <div class="space-y-4">
    <Surface class="p-6">
      <h4 class="mb-2 font-semibold">production-kv</h4>
      <p class="text-sm text-kumo-subtle">Created 2 days ago</p>
    </Surface>
    <Surface class="p-6">
      <h4 class="mb-2 font-semibold">staging-kv</h4>
      <p class="text-sm text-kumo-subtle">Created 1 week ago</p>
    </Surface>
  </div>
</ResourceListDemoShell>