Build performant 3D user interfaces for Three.js using yoga with support for nested scrolling, buttons, inputs, dropdowns, tabs, checkboxes, and more.

Perfect for games, XR (VR/AR), and any web-based Spatial Computing App.

npm install three @pmndrs/uikit @pmndrs/pointer-events

import { Container, reversePainterSortStable } from '@pmndrs/uikit'
import { forwardHtmlEvents } from '@pmndrs/pointer-events'

renderer.localClippingEnabled = true
renderer.setTransparentSort(reversePainterSortStable)

const root = new Container({ sizeX: 8, sizeY: 4, flexDirection: 'row', padding: 10, gap: 10 })
root.add(new Container({ flexGrow: 1, backgroundColor: 'red', opacity: 0.5, hover: { opacity: 1 } }))
root.add(new Container({ flexGrow: 1, backgroundColor: 'blue', opacity: 0.5, hover: { opacity: 1 } }))
scene.add(root)

const events = forwardHtmlEvents(canvas, camera, scene)
let prev = performance.now()
renderer.setAnimationLoop((time) => {
  events.update()
  root.update(time - prev)
  prev = time
  renderer.render(scene, camera)
})

Learn more in the vanilla three.js guide and the documentation. For React Three Fiber, use @react-three/uikit.