Skip to content
Kitsune

Quick Start

This is the npm-flavoured version of Feel It in 30 Seconds. Same idea, real install.

Install

Section titled “Install”
Terminal window
pnpm add @atheory-ai/kitsune

That single package gives you the runtime root export plus explicit subpaths for app elements, UI elements, modules, theme, React, and devtools.

If you’re integrating with React, add the adapter:

Terminal window
pnpm add @atheory-ai/kitsune react react-dom

Mount the shell

Section titled “Mount the shell”
app.ts
import '@atheory-ai/kitsune/app'  // registers <kit-shell>, <kit-boundary>
import '@atheory-ai/kitsune/ui'   // registers <kit-button>, <kit-dialog>, ...
import { notificationModule, dialogModule } from '@atheory-ai/kitsune/ui'
import { debugModule } from '@atheory-ai/kitsune/dev'


customElements.whenDefined('kit-shell').then(() => {
  const shell = document.querySelector('kit-shell')!
  shell.modules = [
    notificationModule(),
    dialogModule(),
    debugModule(),  // logs every event and command to the console while you build
  ]
})
index.html
<kit-shell name="my-app">
  <kit-boundary surface="home" feature="onboarding">
    <kit-button
      meta-event="hello.clicked"
      meta-command="notification.show"
      meta-prop-message="Welcome to Kitsune"
      meta-prop-tone="success"
    >
      Say hello
    </kit-button>
  </kit-boundary>


  <kit-toast-region></kit-toast-region>
</kit-shell>


<script type="module" src="./app.ts"></script>

Open the page, click the button, watch the toast appear and the console fill with [kit:event] and [kit:diagnostic] lines. That’s the loop.

What you have now

Section titled “What you have now”
  • A shell that owns a runtime
  • A boundary that adds surface and feature context to every event inside it
  • A button that emits an event and dispatches a command, without knowing what handles either
  • Three modules — one renders toasts, one drives <kit-dialog>, one logs diagnostics
  • A toast region that shows messages requested by the notification module

Everything in this snippet is a single sentence away from being swapped, removed, or moved into a React app. That’s the point.

What’s next

Section titled “What’s next”