Develop

UISet sample overview

Updated: May 8, 2026

Overview

This sample demonstrates how to build spatial user interfaces with Jetpack Compose and the Meta Spatial SDK UISet library. Explore 20 interactive panels showcasing buttons, sliders, controls, dropdowns, text input, dialogs, tooltips, navigation, theming, and layout patterns.

View the sample source code on GitHub⁠.

Learning objectives

Complete this guide to learn how to:

Implement navigation between multiple panels using TextTileButton grids

Apply and switch between themes using SpatialTheme and custom color schemes

Position panels to face the user’s head using custom ECS components

Build interactive UI with UISet components: buttons, sliders, switches, dropdowns, text fields, and dialogs

Requirements

Meta Quest device running Horizon OS

Android development environment (Android Studio or IntelliJ IDEA)

For platform setup instructions, see Getting started with Spatial SDK.

Get started

Clone the Meta Spatial SDK Samples repository⁠ and open the UISetSample project in Android Studio. Build the project and deploy it to your Quest device using the standard Android deployment workflow. For detailed build instructions and prerequisites, see the README⁠ in the sample repository.

Explore the sample

The sample contains a navigation panel with a button grid. Each button opens one or more content panels showcasing specific UISet components or layout patterns.

Panel structure

Panel type	Description
Buttons	10 button variants: primary, secondary, borderless, destructive, with text/icon/circle styles
Controls	Switches, checkboxes, and radio buttons
Sliders	Large, medium, and small slider variants
Dropdowns	Dropdown menus with selectable items
Input	Text fields with validation states and search bars
Dialogs	Basic and icon-based dialog components
Tooltips	Tooltip content formatting
Navigation	Side navigation items
Theme selector	Runtime theme switching between dark, light, and custom color schemes
Patterns	8 app layout templates: 3 Horizon OS patterns with side navigation and content grids, a video player UI, and 4 custom grid layouts

Runtime behavior

When you launch the sample, you see a 3D scene loaded from a GLXF file with the navigation panel positioned in your forward view. Select any navigation button to show the corresponding content panel. The navigation panel remains visible while you explore content panels. Panels automatically rotate to face your head as you move, driven by a custom ECS system. Use the theme selector panel to switch between four color schemes and see all panels update in real time.

Key concepts

Transparent panel registration

The sample registers all panels with transparent backgrounds to blend naturally into the 3D scene. Notice how PanelRegistry.kt creates each PanelRegistration with enableTransparent = true and includeGlass = false. This configuration removes the default panel background, allowing the Compose UI to render directly in space.

For details on panel configuration options, see PanelRegistry.kt⁠.

The navigation system uses PanelNavigator to control which panels are visible. When you select a navigation button in NavigationView.kt, the navigator queries the ECS scene for entities with matching panel IDs and toggles their Visible component. This pattern demonstrates efficient panel management by toggling visibility instead of recreating panel registrations.

For the complete navigation implementation, see PanelNavigator.kt⁠.

Runtime theme switching

The sample demonstrates global theming with ThemeHolder, a mutable state singleton. The UISetSampleTheme composable wraps SpatialTheme and reads from ThemeHolder.theme to apply the active color scheme. When you change the theme in ThemeSelectorView, all panels update immediately because they observe the same global state.

Custom themes are created by copying a base SpatialColorScheme and overriding specific colors:

val custom = darkSpatialColorScheme().copy(
    primaryButton = Color(0xFFA000D3),
    panel = Brush.verticalGradient(listOf(Color(0xFF53005E), Color(0xFF35003C))),
)

For theme definitions and switching logic, see AppTheme.kt⁠ and ThemeHolder.kt⁠.

Head-facing panels with custom ECS

The sample implements a custom LookAtHead component and LookAtHeadSystem to position panels facing the user’s head. The system queries for entities with the LookAtHead component, retrieves the head pose from PlayerBodyAttachmentSystem, and updates each entity’s transform to face the head position. This pattern shows how to extend the Spatial SDK ECS with custom components and systems.

For the complete ECS implementation, see LookAtHeadSystem.kt⁠.

UISet component library

The UISet library provides spatial-optimized Compose components styled for mixed reality. Each component follows Horizon OS design patterns with built-in states, animations, and accessibility. The sample demonstrates every component variant with interactive examples. Components use SpatialTheme for automatic color scheme support. For detailed component documentation, see UISet overview.

Extend the sample

Add a new panel to the navigation grid by creating a composable in the layouts/ directory, registering it in PanelRegistry, and adding a navigation item in NavigationItems.kt.

Create a custom color scheme by copying an existing SpatialColorScheme and adding it to the theme selector.

Modify LookAtHeadSystem to position panels at fixed positions in the user’s view space instead of world space.

For examples of advanced spatial UI patterns, explore the HybridSample⁠ and MrukSample⁠.