Resource List

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.

Include a sidebar with usage examples or quick start guides.

API Reference

Property	Type	Description
title	string	Page title displayed at the top of the resource list layout.
description	string	Page description displayed below the title.
icon	Component	Icon component displayed next to the title.
usage	Snippet	Sidebar content for usage examples or quick-start guidance.
additionalContent	Snippet	Additional sidebar content, such as resources or links.
children*	Snippet	Main content area for the resource list.
class	string	Additional classes merged onto the root element.