START / NPM ALPHAGN / 01

Install Gnomon UI

Install the public alpha packages. Core owns interaction state; your renderer continues to own every pixel in the scene.

Install only what your scene needs.

The public v0.1 alpha is available on npm. Start with Core and one framework adapter. Add the Three.js lifecycle bridge only when the project renders a WebGL scene.

pnpm add @gnomon-ui/core@next @gnomon-ui/react@next
pnpm add @gnomon-ui/three@next three

ALPHA

Use the @next tag while APIs are still settling. Every package is ESM-only and includes TypeScript declarations.

Keep state semantic.

Spatial.Root owns ordered items, selection, and keyboard intent. Spatial.Scene hands the same snapshot to a DOM, Canvas, or WebGL renderer without coupling the core to graphics.

<Spatial.Root items={items} value={selected} onValueChange={setSelected}>
  <Spatial.Scene asChild>
    <canvas ref={sceneRef} />
  </Spatial.Scene>
  <Spatial.Collection>
    {items.map((item) => (
      <Spatial.Item key={item.id} value={item.id} />
    ))}
  </Spatial.Collection>
</Spatial.Root>

Choose the thinnest adapter.

Use React or Vue for framework composition, core directly for a custom binding, and Three only when a renderer needs a lifecycle bridge.

COMPARE ADAPTERS