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-core @atheory-ai/kitsune-app @atheory-ai/kitsune-ui

That’s the minimum for a UI app. Add the dev module for diagnostics while you build:

Terminal window
pnpm add -D @atheory-ai/kitsune-dev

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

Terminal window
pnpm add @atheory-ai/kitsune-react 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”