uiblocks

Name: uiblocks
Availability: InStock
Author: Google

Design interactive 3D user interfaces for XR Blocks with Three.js and uikit.

455|91|Updated Sep 25, 2025

Search Tags:#ui design #webxr #3d ui #xr blocks #immersive computing

Ready to run

npx skills add https://github.com/google/xrblocks --skill uiblocks

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: uiblocks
Source: https://github.com/google/xrblocks/tree/main/src/addons/uiblocks
Command: npx skills add https://github.com/google/xrblocks --skill uiblocks

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, @pmndrs/uikit, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the creation of interactive 3D user interfaces in XR Blocks apps, enabling developers to design spatial UI components that integrate seamlessly with immersive XR experiences.

Core Features & Use Cases

Spatial UI Creation: Develop UI components that can be placed anywhere in 3D space, supporting object anchoring, head-leashing, and manipulation.
Styling Options: Utilize flexbox layouts, gradients, shadows, and rounded corners to style your UI components.
Interactivity: Implement interactive behaviors like hover, click, and head-leashing for a responsive user experience.
Use Case: Imagine creating a spatial menu for an AR app that responds to user interactions and follows the user's movements.

Quick Start

Use the uiblocks skill to create a simple 3D UI card with text and a button.

Frequently Asked Questions about uiblocks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build interactive 3D user interfaces for WebXR applications?▼

You can build interactive 3D user interfaces by using spatial UI components that support object anchoring and head-leashing. This approach allows you to place UI elements directly in 3D space for seamless AR and VR integration.

What is the best way to create spatial menus in XR that follow user movements?▼

Creating spatial menus that follow user movements is achieved through head-leashing interactivity. This allows your 3D UI components to dynamically track user positions and respond to interactions within immersive XR experiences.

Does the uiblocks skill support flexbox layouts and styling for 3D UI components?▼

Yes, the uiblocks skill supports flexbox layouts for 3D UI components. You can apply advanced styling options like gradients, shadows, and rounded corners to design your spatial interfaces.

Can I use Three.js and uikit for rendering and layout management in XR Blocks?▼

Yes, you can use Three.js and uikit for rendering and layout management in XR Blocks. These dependencies are required to properly render your 3D user interfaces and manage their spatial layout.

How do I add hover and click interactivity to spatial UI components in VR?▼

You can add hover and click interactivity to spatial UI components by implementing the built-in interactive behaviors provided. This ensures a responsive user experience for your VR and AR applications.

Are there limitations when anchoring 3D UI objects in augmented reality environments?▼

While the skill supports object anchoring for 3D UI in AR, complex spatial manipulations require careful management of Three.js and uikit dependencies. Proper rendering setup is essential to avoid layout issues in immersive environments.