Kumo Svelte

Cloudflare's component library for building modern web applications, ported to Svelte.

Kumo Svelte provides accessible, design-system-compliant UI components built on Bits UI. It handles keyboard navigation, focus management, and ARIA attributes so you can build accessible applications without thinking through every detail.

Installation

pnpm add kumo-svelte

Peer Dependencies

pnpm add svelte bits-ui

Usage

<script lang="ts">
  import { Button, Input, Dialog } from 'kumo-svelte';
  import 'kumo-svelte/styles.css';
</script>

Granular Imports (Tree-Shaking)

<script lang="ts">
  import { Button } from 'kumo-svelte/components/button';
</script>

Bits UI Primitives

Kumo Svelte re-exports primitives for advanced use cases:

<script lang="ts">
  import { Popover } from 'kumo-svelte/primitives';
</script>

CLI

Kumo Svelte includes the ported Kumo CLI for component discovery, block installation, migration helpers, and AI usage docs.

npx kumo-svelte help
npx kumo-svelte init
npx kumo-svelte blocks
npx kumo-svelte add PageHeader
npx kumo-svelte ls
npx kumo-svelte doc Button
npx kumo-svelte migrate --classes
npx kumo-svelte ai

Development

This repository contains the Svelte package and MDSX-powered documentation site.

Quick Start

pnpm install
pnpm dev
pnpm check
pnpm build

Creating Components

Port components file-by-file from cloudflare/kumo, preserving the original Tailwind classes and Kumo semantic color tokens. Framework differences should be limited to Svelte snippets, bindings, events, Bits UI primitive APIs, and the Svelte-orange logo treatment in the top-left site mark.

Documentation

• Original Live Docs: kumo-ui.com
• Original Source: cloudflare/kumo

License

MIT