xb-uiblocks

Name: xb-uiblocks
Availability: InStock
Author: Google

Add flexbox-based 3D spatial UI components to XR applications.

455|91|Updated Sep 25, 2025

Search Tags:#UI design #XR #immersive #3D spatial UI #flexbox layout

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the need for rich, 3D spatial UI components for immersive experiences, offering advanced styling and layout options beyond the lightweight core SpatialPanel.

Core Features & Use Cases

Spatial UI Components: Offers UICard, UIPanel, UIText, UIImage, UIIcon for creating complex 3D interfaces.
Flexible Styling: Incorporates gradients, strokes, rounded corners, shadows, and spatial behaviors.
Layout: Includes flexbox-laid-out 3D cards/panels for web-like styling fidelity.
Use Case: Use it when creating spatial applications that require web-like styling or flexbox layout in 3D space.

Quick Start

Use the xb-uiblocks skill to add a styled 3D panel with text and image to your XR experience.

Frequently Asked Questions about xb-uiblocks

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

FAQPage Schema

How do I create flexbox layouts for 3D spatial UI in XR applications?▼

3D spatial UI with flexbox layouts is created using components like UICard and UIPanel that support web-like styling fidelity, including gradients, strokes, rounded corners, and shadows. These components enable complex interface layouts in immersive experiences.

What components are available for building immersive 3D interfaces?▼

Components for building immersive 3D interfaces include UICard, UIPanel, UIText, UIImage, and UIIcon. These elements allow developers to construct complex 3D interfaces with advanced visual effects and spatial behaviors for XR applications.

Do I need a specific renderer to use 3D spatial UI components?▼

Yes, using these 3D spatial UI components requires a uikit renderer and appropriate configuration. The @pmndrs/uikit dependency is necessary to enable complex 3D interface layouts and advanced visual effects in XR experiences.

When should I use advanced 3D panels instead of a lightweight SpatialPanel?▼

Use advanced 3D panels when your immersive experience requires rich styling options like gradients, shadows, and flexbox layout beyond the capabilities of a lightweight core SpatialPanel. It is ideal for achieving web-like styling fidelity in 3D space.

Can I apply web-like visual effects to 3D panels in spatial applications?▼

Yes, you can apply web-like visual effects to 3D panels in spatial applications. The styling system incorporates gradients, strokes, rounded corners, and shadows to achieve high visual fidelity for interfaces deployed in immersive XR environments.