Component compiler · referencer

One source. Native everywhere.

Each Kumo component is authored once as a canonical definition and compiled to native Vue, Svelte, and Solid — not wrapped, not transpiled at runtime, but emitted as real framework-native components. Every tile below is the actual compiled output, rendered live in an isolated frame. Open the menus and dialogs: they work.

36components
3native targets
108compiled cells
Vue Svelte Solid React · canonical source

About this compiler

Kumo is a component compiler. Each component is authored once as a canonical definition — canonical React is the source of truth — and compiled to real native Vue, Svelte, and Solid components. The output is genuine framework-native code, not runtime-wrapped React, so every target ships and behaves like a component a human would have written by hand.

★ View source on GitHub

Real-world proof

See it in a real project. This is an actual Astro site consuming the published @acoyfellow/kumo-* packages directly — no React, no hand-written tokens. Check the live build and read the source.

View live Astro demo → ★ View source on GitHub

Get started

Each target ships as its own native npm package. Install the one for your framework, import a component, render it — no wrappers, no runtime transpile. Every component (e.g. DropdownMenu) is a named export.

Vue @acoyfellow/kumo-vue
1 · Install
npm i @acoyfellow/kumo-vue
2 · Import & use
<script setup>
import { DropdownMenu } from '@acoyfellow/kumo-vue'
</script>

<template>
  <DropdownMenu />
</template>
Svelte @acoyfellow/kumo-svelte
1 · Install
npm i @acoyfellow/kumo-svelte
2 · Import & use
<script>
  import { DropdownMenu } from '@acoyfellow/kumo-svelte'
</script>

<DropdownMenu />
Solid @acoyfellow/kumo-solid
1 · Install
npm i @acoyfellow/kumo-solid
2 · Import & use
import { render } from 'solid-js/web'
import { DropdownMenu } from '@acoyfellow/kumo-solid'

render(() => <DropdownMenu />,
  document.getElementById('app')!)

Canonical React source means every component is authored once as a single React-shaped definition; the Vue, Svelte and Solid packages above are compiled from that source, so all three stay in lockstep with one canonical API.

Presentational

Static, content-driven primitives — rendered server-clean with zero JavaScript where possible.

Badge

<kumo-badge> View full page → 3 native variants
vue
svelte
solid

Code

<kumo-code> View full page → 3 native variants
vue
svelte
solid

Empty

<kumo-empty> View full page → 3 native variants
vue
svelte
solid

Grid

<kumo-grid> View full page → 3 native variants
vue
svelte
solid

Grid Item

<kumo-grid-item> View full page → 3 native variants
vue
svelte
solid

Layer Card

<kumo-layer-card> View full page → 3 native variants
vue
svelte
solid

Loader

<kumo-loader> View full page → 3 native variants
vue
svelte
solid

Meter

<kumo-meter> View full page → 3 native variants
vue
svelte
solid

Surface

<kumo-surface> View full page → 3 native variants
vue
svelte
solid

Table

<kumo-table> View full page → 3 native variants
vue
svelte
solid

Table Of Contents

<kumo-table-of-contents> View full page → 3 native variants
vue
svelte
solid

Text

<kumo-text> View full page → 3 native variants
vue
svelte
solid

Forms & inputs

Interactive controls — buttons, fields, toggles and selection inputs.

Button

<kumo-button> View full page → 3 native variants
vue
svelte
solid

Checkbox

<kumo-checkbox> View full page → 3 native variants
vue
svelte
solid

Clipboard Text

<kumo-clipboard-text> View full page → 3 native variants
vue
svelte
solid

Field

<kumo-field> View full page → 3 native variants
vue
svelte
solid

Input

<kumo-input> View full page → 3 native variants
vue
svelte
solid

Input Area

<kumo-input-area> View full page → 3 native variants
vue
svelte
solid

Input Group

<kumo-input-group> View full page → 3 native variants
vue
svelte
solid

Label

<kumo-label> View full page → 3 native variants
vue
svelte
solid

Pagination

<kumo-pagination> View full page → 3 native variants
vue
svelte
solid

Radio

<kumo-radio> View full page → 3 native variants
vue
svelte
solid

Sensitive Input

<kumo-sensitive-input> View full page → 3 native variants
vue
svelte
solid

Switch

<kumo-switch> View full page → 3 native variants
vue
svelte
solid

Interactive & overlays

Stateful components with floating surfaces — open the menus, dialogs, listboxes and popovers; they really work.

Autocomplete

<kumo-autocomplete> View full page → 3 native variants
vue
svelte
solid

Combobox

<kumo-combobox> View full page → 3 native variants
vue
svelte
solid

Dialog

<kumo-dialog> View full page → 3 native variants
vue
svelte
solid

Popover

<kumo-popover> View full page → 3 native variants
vue
svelte
solid

Select

<kumo-select> View full page → 3 native variants
vue
svelte
solid

Tabs

<kumo-tabs> View full page → 3 native variants
vue
svelte
solid