NPM Registry

The kumo-svelte package is published to npm. No special registry configuration is required.

Install Package

pnpm add kumo-svelte

Install peer dependencies if needed:

pnpm add svelte tailwindcss

If you use chart components, install ECharts too:

pnpm add echarts

Import Components

Import component families from their subpaths.

import { Button } from "kumo-svelte/components/button";
import { Input } from "kumo-svelte/components/input";
import * as LayerCard from "kumo-svelte/components/layer-card";

Import Styles

Import the Kumo Svelte stylesheet in your app entry point or root layout:

import "kumo-svelte/styles";

For apps without Tailwind CSS, import the standalone build instead:

import "kumo-svelte/styles/standalone";

Usage Example

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { Input } from "kumo-svelte/components/input";
  import * as LayerCard from "kumo-svelte/components/layer-card";
</script>

<LayerCard.Root 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.Root>