Resource List
kumo-svelte

Resource List

A layout component 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 our documentation to learn more about KV storage.

<script lang="ts">
  import { Code, Surface } from 'kumo-svelte';
  import { ResourceListPage } from '../../../blocks/resource-list';
  import { Database } from 'phosphor-svelte';
</script>

{#snippet usage()}
  <Surface class="p-4">
    <h3 class="mb-2 font-semibold">Usage Example</h3>
    <Code
      lang="ts"
      code={`// Read from KV
const value = await KV.get('key');

// Write to KV
await KV.put('key', 'value');`}
    />
  </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 our documentation to learn more about KV storage.
    </p>
  </Surface>
{/snippet}

<ResourceListPage
  title="KV Namespaces"
  description="Store key-value data globally with low-latency access"
  icon={Database}
  {usage}
  {additionalContent}
>
  <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>
</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 kumo-svelte init

2. Install the block

npx kumo-svelte add ResourceListPage

3. Import from your local path

<script lang="ts">  import { ResourceListPage } from './components/kumo/resource-list/resource-list';</script>
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

<script lang="ts">  import { Surface } from 'kumo-svelte';  import { ResourceListPage } from './components/kumo/resource-list/resource-list';  import { Database } from 'phosphor-svelte';</script><ResourceListPage  title="Databases"  description="Manage your database instances and configurations"  icon={Database}>  <Surface class="p-6">{/* Your resource list content */}</Surface></ResourceListPage>

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 { Surface } from 'kumo-svelte';
  import { ResourceListPage } from '../../../blocks/resource-list';
  import { Database } from 'phosphor-svelte';
</script>

<ResourceListPage
  title="Databases"
  description="Manage your database instances and configurations"
  icon={Database}
>
  <Surface class="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

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 { Code, Surface } from 'kumo-svelte';
  import { ResourceListPage } from '../../../blocks/resource-list';
</script>

{#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>
    <Code lang="bash" code={'curl -H "Authorization: Bearer YOUR_API_KEY" https://api.example.com'} />
  </Surface>
{/snippet}

<ResourceListPage
  title="API Keys"
  description="Create and manage API keys for your applications"
  {usage}
>
  <Surface class="p-6">
    <p>API keys list would appear here</p>
  </Surface>
</ResourceListPage>

API Reference

PropertyTypeDescription
titlestringPage title displayed at the top of the resource list layout.
descriptionstringPage description displayed below the title.
iconComponentIcon component displayed next to the title.
usageSnippetSidebar content for usage examples or quick-start guidance.
additionalContentSnippetAdditional sidebar content, such as resources or links.
children*SnippetMain content area for the resource list.
classstringAdditional classes merged onto the root element.