@react-three/uikit

Each JSX element creates the matching @pmndrs/uikit component. Its props become the component's properties, and its ref is the vanilla component instance. Both packages share one property model. The pmndrs-uikit skill describes it: pixel units and pixelSize, conditionals and precedence, '*' defaults, classes, fonts, and the flexShrink and scrolling pitfalls. That skill ships with the @pmndrs/uikit dependency at node_modules/@pmndrs/uikit/skills/pmndrs-uikit/SKILL.md. Read it before doing any styling that goes beyond a few props.

Setup

import { Canvas } from '@react-three/fiber'
import { Fullscreen, Container, Text } from '@react-three/uikit'

<Canvas style={{ touchAction: 'none' }}>
  <Fullscreen flexDirection="column" padding={16} gap={8}>
    <Text fontSize={24}>Hello</Text>
    <Container width={120} height={40} backgroundColor="red" hover={{ backgroundColor: 'blue' }} onClick={save} />
  </Fullscreen>
</Canvas>