---
layout: ~/layouts/MdxDocLayout.astro
title: "Resource List"
description: "A layout component for resource list pages with optional sidebar content."
sourceFile: "blocks/resource-list"
---

import Heading from "~/components/docs/Heading.astro";
import ComponentSection from "~/components/docs/ComponentSection.astro";
import ComponentExample from "~/components/docs/ComponentExample.astro";
import Callout from "~/components/docs/Callout.astro";
import {
  ResourceListBasicDemo,
  ResourceListWithUsageDemo,
  ResourceListCompleteDemo,
} from "~/components/demos/ResourceListDemo";

{/* Hero Demo */}

<ComponentSection>
  <ComponentExample demo="ResourceListCompleteDemo">
    <ResourceListCompleteDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Installation */}

<ComponentSection>
  <Heading level={2}>Installation</Heading>
  <p>
    ResourceListPage is a <strong>block</strong> - 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.
  </p>
  <div class="space-y-4">
    <div>
      <p>**1. Initialize Kumo config (first time only)**</p>

```bash
npx @cloudflare/kumo init
```

</div>
<div>
<p>**2. Install the block**</p>

```bash
npx @cloudflare/kumo add ResourceListPage
```

</div>
<div>
<p>**3. Import from your local path**</p>

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

    </div>

  </div>
  <Callout type="info">
    <strong>Why blocks?</strong> 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.
  </Callout>
</ComponentSection>

{/* Usage */}

<ComponentSection>
  <Heading level={2}>Usage</Heading>

```tsx
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>
  );
}
```

</ComponentSection>

{/* Examples */}

<ComponentSection>
  <Heading level={2}>Examples</Heading>

<Heading level={3}>Basic</Heading>
<p>A minimal resource list page with title, description, and icon.</p>
<ComponentExample demo="ResourceListBasicDemo">
  <ResourceListBasicDemo client:visible />
</ComponentExample>

  <Heading level={3}>With Usage Sidebar</Heading>
  <p>Include a sidebar with usage examples or quick start guides.</p>
  <ComponentExample demo="ResourceListWithUsageDemo">
    <ResourceListWithUsageDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* API Reference */}

<ComponentSection>
  <Heading level={2}>API Reference</Heading>
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="border-b border-kumo-line">
          <th class="px-4 py-3 text-left font-semibold">Property</th>
          <th class="px-4 py-3 text-left font-semibold">Type</th>
          <th class="px-4 py-3 text-left font-semibold">Description</th>
        </tr>
      </thead>
      <tbody class="text-kumo-strong">
        <tr class="border-b border-kumo-line">
          <td class="px-4 py-3 font-mono text-xs">title</td>
          <td class="px-4 py-3 font-mono text-xs">string</td>
          <td class="px-4 py-3">Page title displayed at the top</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="px-4 py-3 font-mono text-xs">description</td>
          <td class="px-4 py-3 font-mono text-xs">string</td>
          <td class="px-4 py-3">Page description below the title</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="px-4 py-3 font-mono text-xs">icon</td>
          <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
          <td class="px-4 py-3">Icon displayed next to the title</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="px-4 py-3 font-mono text-xs">usage</td>
          <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
          <td class="px-4 py-3">
            Sidebar content for usage examples or quick start guides
          </td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="px-4 py-3 font-mono text-xs">additionalContent</td>
          <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
          <td class="px-4 py-3">
            Additional sidebar content (e.g., resources, links)
          </td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="px-4 py-3 font-mono text-xs">children</td>
          <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
          <td class="px-4 py-3">Main content area for the resource list</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="px-4 py-3 font-mono text-xs">className</td>
          <td class="px-4 py-3 font-mono text-xs">string</td>
          <td class="px-4 py-3">Additional CSS classes</td>
        </tr>
      </tbody>
    </table>
  </div>
</ComponentSection>
