- Notifications
You must be signed in to change notification settings - Fork152
🎨 user interfaces for react-three-fiber
License
pmndrs/uikit
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Perfect for games, XR (VR/AR), and any web-based Spatial Computing App.
npm install three @react-three/fiber @react-three/uikit
| A simple UI with 2 containers horizontally aligned, rendered in fullscreen. When the user hovers over a container, the container's opacity changes. |  |
|---|
import{createRoot}from'react-dom/client'importReactfrom'react'import{Canvas}from'@react-three/fiber'import{Fullscreen,Container}from'@react-three/uikit'createRoot(document.getElementById('root')).render(<Canvas><FullscreenflexDirection="row"padding={10}gap={10}><ContainerflexGrow={1}backgroundOpacity={0.5}hover={{backgroundOpacity:1}}backgroundColor="red"/><ContainerflexGrow={1}backgroundOpacity={0.5}hover={{backgroundOpacity:1}}backgroundColor="blue"/></Fullscreen></Canvas>,)
Some familiarity withreact, threejs, and @react-three/fiber, is recommended.
Get started withbuilding your first layout, take a look at ourexamples to see uikit in action, or learn more about:
- All components and their properties
- Interactivity
- Custom materials
- Custom fonts
- Responsive user interfaces
- Scrolling
- Sizing
- Common pitfalls
- Optimize performance
- Theming components
We provide multiple kits containingthemable pre-styled components. Inspired by shadcn, you can use our CLI to install the source code of any component to your desired location with one command.
For example, to add the button from the default kit, run:
npx uikit component add default Button
| based onShadcn | inspired by AVP |
|---|---|
 |  |
| View All Components | View All Components |
npx uikit component add default Button | npx uikit component add apfel Button |
This project is supported by a few companies and individuals building cutting edge 3D Web & XR experiences. Check them out!
About
🎨 user interfaces for react-three-fiber
