https://github.com/pmndrs/uikit
🎨 user interfaces for react-three-fiber
https://github.com/pmndrs/uikit
flexbox r3f react threejs typescript uikit userinterface yoga
Last synced: 8 days ago
JSON representation
🎨 user interfaces for react-three-fiber
- Host: GitHub
- URL: https://github.com/pmndrs/uikit
- Owner: pmndrs
- License: other
- Created: 2024-02-15T18:26:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-21T20:18:26.000Z (29 days ago)
- Last Synced: 2025-04-23T17:18:17.016Z (27 days ago)
- Topics: flexbox, r3f, react, threejs, typescript, uikit, userinterface, yoga
- Language: TypeScript
- Homepage: https://pmndrs.github.io/uikit/docs/
- Size: 166 MB
- Stars: 2,873
- Watchers: 26
- Forks: 154
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
uikit
Build performant 3D user interfaces for
threejs using R3F and yoga.
> Perfect for games, XR (VR/AR), and any web-based Spatial Computing App.
```bash
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. |  |
| --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
```jsx
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(
,
)
```
## How to get started
> Some familiarity with
> react, threejs, and @react-three/fiber, is recommended.
Get started with **[building your first layout](https://docs.pmnd.rs/uikit/getting-started/first-layout)**, take a look at our **[examples](https://docs.pmnd.rs/uikit/getting-started/examples)** to see uikit in action, or learn more about:
- [All components and their properties](https://docs.pmnd.rs/uikit/getting-started/components-and-properties)
- [Interactivity](https://docs.pmnd.rs/uikit/tutorials/interactivity)
- [Custom materials](https://docs.pmnd.rs/uikit/tutorials/custom-materials)
- [Custom fonts](https://docs.pmnd.rs/uikit/tutorials/custom-fonts)
- [Responsive user interfaces](https://docs.pmnd.rs/uikit/tutorials/responsive)
- [Scrolling](https://docs.pmnd.rs/uikit/tutorials/scroll)
- [Sizing](https://docs.pmnd.rs/uikit/tutorials/sizing)
- [Common pitfalls](https://docs.pmnd.rs/uikit/advanced/pitfalls)
- [Optimize performance](https://docs.pmnd.rs/uikit/advanced/performance)
- [Theming components](https://docs.pmnd.rs/uikit/advanced/theming)
## Pre-styled component kits
We provide multiple kits containing **themable pre-styled components**.
|
default
_based on [Shadcn](https://github.com/shadcn-ui/ui)_ | apfel
_inspired by AVP_ |
| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
|  |  |
| [View All Components](https://docs.pmnd.rs/uikit/default-kit/accordion) | [View All Components](https://docs.pmnd.rs/uikit/apfel-kit/button) |
| `npm i @react-three/uikit-default` | `npm i @react-three/uikit-apfel` |
## Migration guides
- from [Koestlich](https://docs.pmnd.rs/uikit/migration/from-koestlich)
- from [HTML/CSS](https://docs.pmnd.rs/uikit/migration/from-html-css)
- from [Tailwind](https://docs.pmnd.rs/uikit/migration/from-tailwind)
## Sponsors
This project is supported by a few companies and individuals building cutting edge 3D Web & XR experiences. Check them out!
