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} backgroundOpacity={0.5} hover={{ backgroundOpacity: 1 }} backgroundColor="red" /> <Container flexGrow={1} backgroundOpacity={0.5} hover={{ backgroundOpacity: 1 }} backgroundColor="blue" /> </Fullscreen> </Canvas> ) }
How to get started
Some familiarity with react, threejs, and @react-three/fiber, is recommended.
Get started with building your first layout, take a look at our examples to see uikit in action, or learn more about:
Pre-styled component kits
We provide multiple kits containing themable pre-styled components.
defaultbased on Shadcn | apfelinspired by AVP |
---|---|
![]() | ![]() |
View All Components | View All Components |
npm i @react-three/uikit-default | npm i @react-three/uikit-apfel |
Migration guides
Sponsors
This project is supported by a few companies and individuals building cutting edge 3D Web & XR experiences. Check them out!