uikit

Build performant 3D user interfaces for threejs.

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

$3

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

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(





,
)
`

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:

- All components and their properties
- Interactivity
- Custom materials
- Custom fonts
- Responsive user interfaces
- Scrolling
- Sizing
- Common pitfalls
- Optimize performance
- Theming components

Pre-styled component kits

We provide multiple kits containing themable pre-styled components.

|

default

_based on Shadcn_ |

horizon-kit

_based on RLDS_ |
| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| !Overview over all default components | !Overview over all horizon components |
| 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