Package Status

The SolidJS port currently lives in this monorepo as @photon-ai/kumo-solid version 0.0.0. The package is marked private while compatibility work is completed, so it is not available from the public npm registry yet.

Run the Documentation Site

From the repository root, install dependencies and start Astro’s development server:

pnpm install
pnpm --filter @photon-ai/kumo-solid build
pnpm --filter @cloudflare/kumo-docs-astro dev

The local site is available at http://localhost:4321. Astro renders the pages on the server and hydrates interactive Solid components in the browser.

Install Package

While the package remains private, other workspace packages can depend on it with the workspace protocol:

{
  "dependencies": {
    "@photon-ai/kumo-solid": "workspace:*",
    "echarts": "^6.0.0",
    "solid-js": "^1.9.0"
  }
}

After the Solid package is published, the consumer installation command will be:

pnpm add @photon-ai/kumo-solid solid-js echarts

solid-js and echarts are peer dependencies. ECharts is only needed by the chart components, but declaring it at the application level keeps package resolution predictable.

Import Components

Import components from the main package or use granular component exports:

Main Package Import

import { Button, Input, LayerCard } from "@photon-ai/kumo-solid";

Granular Import

import { Button } from "@photon-ai/kumo-solid/components/button";
import { Input } from "@photon-ai/kumo-solid/components/input";

Base UI Primitives

Kumo Solid is built on Base UI Solid, an accessible, unstyled primitive library for SolidJS. Kumo consumes @photon-ai/base-ui-solid internally.

The Solid package does not currently re-export raw primitives. Import a styled Kumo component whenever one exists. For an advanced custom component, install Base UI Solid directly and compose its primitive with Kumo semantic tokens:

pnpm add @photon-ai/base-ui-solid

import { Popover } from "@photon-ai/base-ui-solid/popover";

Import Styles

Kumo provides two CSS distribution options.

For Tailwind CSS Users (Recommended)

Add the package build to Tailwind’s source scan and import Kumo before Tailwind:

/* app.css or main.css */
@source "../node_modules/@photon-ai/kumo-solid/dist/**/*.{js,jsx,ts,tsx}";
@import "@photon-ai/kumo-solid/styles/tailwind";
@import "tailwindcss";

The @source path is relative to your CSS file. The default @photon-ai/kumo-solid/styles export is equivalent to styles/tailwind.

For Non-Tailwind Users

Import the standalone build, which includes the compiled utilities used by Kumo:

import "@photon-ai/kumo-solid/styles/standalone";

Usage Example

CSS File (app.css)

@source "../node_modules/@photon-ai/kumo-solid/dist/**/*.{js,jsx,ts,tsx}";
@import "@photon-ai/kumo-solid/styles/tailwind";
@import "tailwindcss";

Solid Component (App.tsx)

import { Button, Input, LayerCard } from "@photon-ai/kumo-solid";
import "./app.css";

export default function App() {
  return (
    <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

Components are versioned package exports such as Button, Input, and Dialog:

import { Button, Dialog, Input } from "@photon-ai/kumo-solid";

Blocks

Blocks are higher-level compositions whose source is copied into an application. The blocks used by this documentation site have been ported to SolidJS and live under src/components/kumo/.

import { PageHeader } from "./components/kumo/page-header/page-header";

Utilities

Kumo Solid also exports utilities for class composition, stable IDs, and router-link adaptation:

import { cn, LinkProvider, safeRandomId } from "@photon-ai/kumo-solid";

const className = cn("base-class", condition && "conditional-class");
const id = safeRandomId();

<LinkProvider component={YourAppLink}>
  <App />
</LinkProvider>;