# @react-three/uikit

> Build performant 3D user interfaces with react-three-fiber and yoga.

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

## Install

```sh
npm install @react-three/uikit
pnpm add @react-three/uikit
yarn add @react-three/uikit
bun add @react-three/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-02-21 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 3243 |
| Author | Bela Bohlender |
| Maintainers | gsimone, drcmda, tdfka_rick, farazshaikh, isaacmason, bela-bohlender, dennissmolek, krispyaa |
| Keywords | r3f, uikit, three.js, userinterface, react, flexbox, yoga, typescript |

## Links

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

## Dependencies (5)

- [zustand](https://npm.io/package/zustand.md) ^5.0.6
- [@pmndrs/uikit](https://npm.io/package/@pmndrs/uikit.md) ^1.0.76
- [suspend-react](https://npm.io/package/suspend-react.md) ^0.1.3
- [@preact/signals-core](https://npm.io/package/@preact/signals-core.md) ^1.5.1
- [@pmndrs/pointer-events](https://npm.io/package/@pmndrs/pointer-events.md) ^6.6.29

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K 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/@react-three/uikit/versions

## README

<p align="center">
  <img src="./docs/getting-started/logo.svg" width="100" />
</p>

<h1 align="center">uikit</h1>
<h3 align="center">Build performant 3D user interfaces for threejs.</h3>
<br/>

<p align="center">
  <a href="https://npmjs.com/package/@react-three/uikit" target="_blank">
    <img src="https://img.shields.io/npm/v/@react-three/uikit?style=flat&colorA=000000&colorB=000000" alt="NPM" />
  </a>
  <a href="https://npmjs.com/package/@react-three/uikit" target="_blank">
    <img src="https://img.shields.io/npm/dt/@react-three/uikit.svg?style=flat&colorA=000000&colorB=000000" alt="NPM" />
  </a>
  <a href="https://twitter.com/pmndrs" target="_blank">
    <img src="https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000" alt="Twitter" />
  </a>
  <a href="https://discord.gg/ZZjjNvJ" target="_blank">
    <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000" alt="Discord" />
  </a>
</p>

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

### 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) |
| --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |

Source code when using `@react-three/uikit`:

```jsx
import { createRoot } from 'react-dom/client'
import React from 'react'
import { Canvas } from '@react-three/fiber'
import { Fullscreen, Container } from '@react-three/uikit'

createRoot(document.getElementById('root')).render(
  <Canvas>
    <Fullscreen flexDirection="row" padding={10} gap={10}>
      <Container flexGrow={1} opacity={0.5} hover={{ opacity: 1 }} backgroundColor="red" />
      <Container flexGrow={1} opacity={0.5} hover={{ opacity: 1 }} backgroundColor="blue" />
    </Fullscreen>
  </Canvas>,
)
```

## How to get started

If you are using `@react-three/fiber`, get started with **[building your first layout](https://docs.pmnd.rs/uikit/getting-started/first-layout)**, take a look at our **[examples](https://docs.pmnd.rs/uikit/getting-started/examples)** to see uikit in action. If you want to use vanilla three.js, visit [this tutorial](https://pmndrs.github.io/uikit/docs/getting-started/vanilla). Alternatively, learn more about:

- [All components and their properties](https://docs.pmnd.rs/uikit/getting-started/components-and-properties)
- [Interactivity](https://docs.pmnd.rs/uikit/tutorials/interactivity)
- [Custom materials](https://docs.pmnd.rs/uikit/tutorials/custom-materials)
- [Custom fonts](https://docs.pmnd.rs/uikit/tutorials/custom-fonts)
- [Responsive user interfaces](https://docs.pmnd.rs/uikit/tutorials/responsive)
- [Scrolling](https://docs.pmnd.rs/uikit/tutorials/scroll)
- [Sizing](https://docs.pmnd.rs/uikit/tutorials/sizing)
- [Common pitfalls](https://docs.pmnd.rs/uikit/advanced/pitfalls)
- [Optimize performance](https://docs.pmnd.rs/uikit/advanced/performance)
- [Theming components](https://docs.pmnd.rs/uikit/advanced/theming)

## Pre-styled component kits

We provide multiple kits containing **themable pre-styled components**.

| <h3>default</h3> _based on [Shadcn](https://github.com/shadcn-ui/ui)_                | <h3>horizon-kit</h3> _based on [RLDS](https://www.figma.com/de-de/community/file/1509641173090552632/meta-horizon-os-ui-set)_ |
| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| ![Overview over all default components](./docs/getting-started/default-overview.jpg) | ![Overview over all horizon components](./docs/getting-started/horizon-overview.png)                                          |
| [View All Components](https://docs.pmnd.rs/uikit/default-kit/accordion)              | [View All Components](https://docs.pmnd.rs/uikit/horizon-kit/avatar)                                                          |
| install via `@react-three/uikit-default` or `@pmndrs/uikit-default`                  | install via `@react-three/uikit-horizon` or `@pmndrs/uikit-horizon`                                                           |

## Migration guides

- from [Uikit 0.\*](https://pmndrs.github.io/uikit/docs/migration/from-version-0)

## Sponsors

This project is supported by a few companies and individuals building cutting edge 3D Web & XR experiences. Check them out!

![Sponsors Overview](https://bbohlender.github.io/sponsors/screenshot.png)

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