NPM Registry

The kumo-svelte package is published to the public npm registry. No special configuration is required for installation.

Install Package

Install Kumo Svelte with your preferred package manager. The current version is v0.3.0.

npm

npm install kumo-svelte

pnpm

pnpm add kumo-svelte

yarn

yarn add kumo-svelte

Peer Dependencies

Kumo Svelte requires Svelte 5. Chart components also expect ECharts when you render charts.

pnpm add svelte echarts

Import Components

Import styled components from the main package entry point.

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

Import additional components from the same package entry point.

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

Bits UI Primitives

The Svelte port uses Bits UI for accessible primitives. Prefer Kumo Svelte's styled components when they exist, and reach for Bits UI directly when you need a lower-level primitive that Kumo does not expose yet.

Import Styles

If your application uses Tailwind CSS, add Kumo Svelte's source files and import the package styles before Tailwind.

/* app.css */@source "../node_modules/kumo-svelte/dist/**/*.{js,svelte,ts}";@import "kumo-svelte/styles.css";@import "tailwindcss";

Adjust the @source path if your CSS file lives in a different directory.

Usage Example

CSS File

@source "../node_modules/kumo-svelte/dist/**/*.{js,svelte,ts}";@import "kumo-svelte/styles.css";@import "tailwindcss";

Component File

<script lang="ts">  import { Button, Input, LayerCard } from 'kumo-svelte';</script><LayerCard class="rounded-lg p-6">  <h1 class="mb-4 text-2xl font-bold">Welcome to Kumo</h1>  <Input placeholder="Enter your name..." class="mb-4" />  <Button variant="primary">Submit</Button></LayerCard>

Blocks vs Components

Components are versioned package exports such as Button, Input, and Dialog. Blocks are larger compositions that you copy into your project and own.

npx kumo-svelte initnpx kumo-svelte blocksnpx kumo-svelte add PageHeader

After installation, blocks live in your project and can be customized directly.

Utilities

<script lang="ts">  import { cn } from 'kumo-svelte';  const classes = cn('base-class', true && 'conditional-class');</script>