Introduction

Build performant 3D user interfaces for threejs using R3F and yoga.

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

npm install three @react-three/fiber @react-three/uikit

What does it look like?

import { Canvas } from "@react-three/fiber";
import { Fullscreen, Container } from "@react-three/uikit";

export default function App() {
return (
  <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
    <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, take a look at our examples to see uikit in action. If you want to use vanilla three.js, visit this tutorial. Alternatively, learn more about:

Pre-styled component kits

We provide multiple kits containing themable pre-styled components.

default-kit based on Shadcn	horizon-kit based on RLDS

View All Components	View All Components
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.*

Sponsors

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

Sponsors Overview