Uikit

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

Source code when using @react-three/uikit:

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

| <h3>default</h3> based on Shadcn | <h3>horizon-kit</h3> 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!