# @pmndrs/uikit

> Build performant 3D user interfaces with Three.js and yoga.

Latest version **1.0.76** (published 2026-09-01) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @pmndrs/uikit
pnpm add @pmndrs/uikit
yarn add @pmndrs/uikit
bun add @pmndrs/uikit
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.76 |
| Published | 2026-09-01 |
| First published | 2024-04-10 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 3239 |
| Author | Bela Bohlender |
| Maintainers | abernier, pmndrs01, drcmda, bjornstar, dennissmolek, bela-bohlender, isaacmason, krispyaa |
| Keywords | uikit, three.js, userinterface, flexbox, yoga, typescript |

## Links

- npm: https://www.npmjs.com/package/@pmndrs/uikit
- Repository: https://github.com/pmndrs/uikit
- Issues: https://github.com/pmndrs/uikit/issues
- npm.io page: https://npm.io/package/@pmndrs/uikit

## Dependencies (6)

- [zod](https://npm.io/package/zod.md) ^4.4.3
- [yoga-layout](https://npm.io/package/yoga-layout.md) ^3.2.1
- [@pmndrs/msdfonts](https://npm.io/package/@pmndrs/msdfonts.md) ^1.0.76
- [@preact/signals-core](https://npm.io/package/@preact/signals-core.md) ^1.5.1
- [@pmndrs/uikit-pub-sub](https://npm.io/package/@pmndrs/uikit-pub-sub.md) ^1.0.76
- [@zappar/msdf-generator](https://npm.io/package/@zappar/msdf-generator.md) ^1.2.4

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.76 (latest) — 2026-09-01
- 1.0.45 (alpha) — 2025-10-16
- 1.0.75 — 2026-08-03
- 1.0.74 — 2026-06-18
- 1.0.73 — 2026-05-27
- 1.0.72 — 2026-05-16
- 1.0.71 — 2026-05-15
- 1.0.70 — 2026-05-15
- 1.0.69 — 2026-05-14
- 1.0.68 — 2026-05-12
- 1.0.67 — 2026-05-05
- 1.0.66 — 2026-05-05
- 1.0.64 — 2026-03-10
- 1.0.63 — 2026-03-07
- 1.0.62 — 2026-02-10
- … 116 more at https://npm.io/package/@pmndrs/uikit/versions

## README

<h1>pmndrs/uikit</h1>

[![Version](https://img.shields.io/npm/v/@pmndrs/uikit?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@pmndrs/uikit)
[![Downloads](https://img.shields.io/npm/dt/@pmndrs/uikit.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@pmndrs/uikit)
[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)
[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)

![uikit banner](./docs/getting-started/banner.jpg)

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.

```bash
npm install three @pmndrs/uikit
```

### What does it look like ?

| A simple UI with 2 containers horizontally aligned, rendered in fullscreen. When the user hovers over a container, the container's opacity changes. | ![render of the above code](./docs/getting-started/basic-example.gif) |
| --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |

```jsx
import { PerspectiveCamera, Scene, WebGLRenderer } from 'three'
import { reversePainterSortStable, Container } from '@pmndrs/uikit'

const camera = new PerspectiveCamera(70, 1, 0.01, 100)
camera.position.z = 10

const scene = new Scene()

const canvas = document.getElementById('root') as HTMLCanvasElement

const renderer = new WebGLRenderer({ antialias: true, canvas })

const root = new Container({
    flexDirection: "row",
    padding: 10,
    gap: 10,
    width: 1000,
    height: 500
})
scene.add(root)
const c1 = new Container({
    flexGrow: 1,
    opacity: 0.5,
    hover: { opacity: 1 }
    backgroundColor: "red"
})
root.add(c1)
const c2 = new Container({
    flexGrow: 1,
    opacity: 0.5,
    hover: { opacity: 1 },
    backgroundColor: "blue"
})
root.add(c2)

renderer.setAnimationLoop(animation)
renderer.localClippingEnabled = true
renderer.setTransparentSort(reversePainterSortStable)

function updateSize() {
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setPixelRatio(window.devicePixelRatio)
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
}

updateSize()
window.addEventListener('resize', updateSize)

let prev: number | undefined
function animation(time: number) {
  const delta = prev == null ? 0 : time - prev
  prev = time

  root.update(delta)

  renderer.render(scene, camera)
}

```

## Events

Events such a hovering require an additional event system that dispatches pointerover, ... events into the scene. More on this later ...

---
_Source: https://npm.io/package/@pmndrs/uikit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._