Skip to content
Kitsune

What is Kitsune?

Kitsune is a web-native application kit for modular frontend systems. Three sentences make up the whole thesis:

  1. The browser is now enough. Custom elements, native <dialog>, form-associated controls, ARIA, CSS cascade layers, container queries — the platform you needed in 2014 finally exists, and using it directly produces smaller, more accessible, longer-lived apps.
  2. Components should describe meaning, not integrate vendors. A button shouldn’t know that PostHog or Sentry or Supabase or your audit log exists. It should describe what happened and what it means. Everything else is a module.
  3. Capabilities should be installable. Analytics, observability, audit, storage, notifications, permissions, validation, feature flags — all of those belong in modules that can be installed, swapped, or removed without touching the UI.
<kit-shell name="designer">
  <kit-boundary surface="token-editor" feature="design-system"
                entity-type="token" entity-id="color.primary">
    <kit-button meta-event="token.saved"
                meta-command="notification.show"
                meta-prop-message="Saved">
      Save token
    </kit-button>
  </kit-boundary>
</kit-shell>

The button doesn’t import analytics. It doesn’t import storage. It doesn’t import a notification system. It says: a token.saved event happened, please show a notification. The boundary adds the surface, feature, and entity. The runtime hands the event to whichever modules want it. A notification module pops a toast. An analytics module records the product event. An audit module writes an entry. None of them are imported by the button.

This is the architecture.

What Kitsune ships

Section titled “What Kitsune ships”
LayerPackageWhat it gives you
Runtime@atheory-ai/kitsune-coreEvents, commands, modules, providers, boundaries, diagnostics
App elements@atheory-ai/kitsune-appkit-shell, kit-boundary, the metadata bridge
UI@atheory-ai/kitsune-uikit-button, kit-dialog, kit-toast-region, kit-field, kit-card, plus the modules that drive them
Theme@atheory-ai/kitsune-themeToken-driven CSS, theme switching
React@atheory-ai/kitsune-reactProvider, boundary, hooks
Dev@atheory-ai/kitsune-devDebug module, diagnostic logging

The UI surface is small on purpose. New elements arrive when the architecture demands them, not when a designer wants them.

What Kitsune is not

Section titled “What Kitsune is not”
  • Not a virtual DOM. Lit renders to real DOM. Browser primitives stay primitive.
  • Not a router. The boundary system gives you contextual routing. Bring whatever URL strategy you like.
  • Not a state container. Modules can hold state. Providers can host services. There’s no globally-mandated reducer.
  • Not a CSS-in-JS runtime. Components are themed with CSS custom properties. The cascade does its job.
  • Not anti-React. React works fine inside <KitBoundary>. Custom elements work fine inside React. The architecture is portable.
  • Not finished. This is v0. The runtime is stable; the UI surface is small and growing. See the tutorial for what’s already real.

Where to go next

Section titled “Where to go next”