r3f-xr-widgetsXR/VR Widgets for React Three Fiber

XR widgets and utilities for React Three Fiber

Get Started

View Components

Try Demos

Resizable Windows

Draggable, resizable 3D windows with audio feedback and haptic responses for XR controllers

XR Session Management

Beautiful splash screens with automatic VR/AR detection and session entry

Eye-Level Positioning

Automatic eye-level positioning for comfortable viewing across different users

Audio & Haptics

Built-in positional audio and controller haptic feedback for immersive interactions

TypeScript First

Fully typed components with comprehensive IntelliSense support

Small & Focused

Minimal bundle size with tree-shaking support and zero dependencies

Quick Example

tsx

import { Canvas } from '@react-three/fiber'
import { XR, createXRStore } from '@react-three/xr'
import { ResizableWindow, SplashScreen, AudioEffects } from 'r3f-xr-widgets'

const store = createXRStore()

function App() {
  return (
    <>
      <SplashScreen store={store}>
        <h1>My VR App</h1>
        <p>Click Enter VR to begin</p>
      </SplashScreen>

      <Canvas>
        <XR store={store}>
          <AudioEffects />
          <ResizableWindow position={[0, 1.5, -1]}>
            <mesh>
              <boxGeometry />
              <meshStandardMaterial color="hotpink" />
            </mesh>
          </ResizableWindow>
        </XR>
      </Canvas>
    </>
  )
}