@number10/jsx-components

Portable UI components for the PhaserJSX framework — renderer-neutral (no Phaser or Pixi imports).

Usage

/** @jsxImportSource @number10/jsx-core */
import { Button, Text, View } from '@number10/jsx-components'
import { useState } from '@number10/jsx-core'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <View gap={12} padding={16}>
      <Text text={`Count: ${count}`} />
      <Button onClick={() => setCount((c) => c + 1)} label="+1" />
    </View>
  )
}

What's included

• Primitives (View, Text, Image, Sprite, VectorDrawContent)
• Components (Button, Badge, Checkbox, Dialog, Modal, Popover, ScrollView, Toast, Accordion, Tabs, …)
• Hooks (useOverlayPresence, and all core hooks re-exported)
• Theme system — renderer-agnostic theme defaults for all components

Renderer integration

This package provides the portable component definitions. You also need a renderer adapter:

| Renderer | Package | Status | | -------- | ---------------------- | -------------------- | | Phaser 4 | @number10/jsx-phaser | ✅ Full | | PixiJS 8 | @number10/jsx-pixi | ✅ Full | | Konva | @number10/jsx-konva | ✅ Full | | Legacy | @number10/phaserjsx | ⚠️ Deprecated compat |

For 3D panel surfaces, keep using portable components from this package and pair @number10/jsx-konva with @number10/jsx-three.

License

GPL-3.0-only