0.8.19 • Published 6 months ago

@react-three/uikit v0.8.19

Weekly downloads
-
License
SEE LICENSE IN LI...
Repository
github
Last release
6 months ago

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?

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

default based on Shadcnapfel inspired by AVP
Overview over all default componentsOverview over all apfel components
View All ComponentsView All Components
npm i @react-three/uikit-defaultnpm 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!

Sponsors Overview

0.8.9

8 months ago

0.8.8

8 months ago

0.8.5

9 months ago

0.8.4

11 months ago

0.8.7

9 months ago

0.8.6

9 months ago

0.7.1

12 months ago

0.8.12

8 months ago

0.8.11

8 months ago

0.8.14

7 months ago

0.8.13

7 months ago

0.8.10

8 months ago

0.8.19

6 months ago

0.8.16

6 months ago

0.8.15

7 months ago

0.8.18

6 months ago

0.8.17

6 months ago

0.8.1

12 months ago

0.8.0

12 months ago

0.8.3

12 months ago

0.8.2

12 months ago

0.7.0

12 months ago

0.6.4

12 months ago

0.6.3

1 year ago

0.6.2

1 year ago

0.6.1

1 year ago

0.6.0

1 year ago

0.5.4

1 year ago

0.5.3

1 year ago

0.5.2

1 year ago

0.5.1

1 year ago

0.3.6

1 year ago

0.3.5

1 year ago

0.3.8

1 year ago

0.3.7

1 year ago

0.5.0

1 year ago

0.3.9

1 year ago

0.3.13

1 year ago

0.3.12

1 year ago

0.3.11

1 year ago

0.3.10

1 year ago

0.4.4

1 year ago

0.4.1

1 year ago

0.4.0

1 year ago

0.4.3

1 year ago

0.4.2

1 year ago

0.3.4

1 year ago

0.3.3

1 year ago

0.3.2

1 year ago

0.3.1

1 year ago

0.3.0

1 year ago

0.2.9

2 years ago

0.2.8

2 years ago

0.2.7

2 years ago

0.2.6

2 years ago

0.2.5

2 years ago

0.2.4

2 years ago

0.2.3

2 years ago

0.2.1

2 years ago

0.2.2

2 years ago

0.1.22

2 years ago

0.2.0

2 years ago

0.1.20

2 years ago

0.1.21

2 years ago

0.1.19

2 years ago

0.1.15

2 years ago

0.1.16

2 years ago

0.1.17

2 years ago

0.1.18

2 years ago

0.1.14

2 years ago

0.1.12

2 years ago

0.1.13

2 years ago

0.1.11

2 years ago

0.1.10

2 years ago

0.1.9

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago