Develop

Use the Meta VR UI Set SDK

Updated: Aug 25, 2026

The Meta VR UI Set SDK is a Jetpack Compose design system for apps on Meta VR devices. It provides dark and light color schemes, semantic colors, typography, icons, component dimensions, and interaction feedback. It works with the Standard Android build path and does not require Spatial SDK.

The SDK requires Android API 28 or later and Jetpack Compose 1.7.8 or later.

Add the SDK

The following Gradle examples use Kotlin DSL and a version catalog at gradle/libs.versions.toml.

The MetaVRX BOM keeps Maven artifacts from Meta VR SDKs for Android on compatible versions. Import the com.meta.metavrx:metavrx-bom artifact through Gradle’s platform() function, then omit versions from the individual artifacts managed by the BOM.

Add the BOM version and the UI Set artifact without a version to the catalog:

[versions]
metavrx-bom = "1.2026.0.0"

[libraries]
metavrx-bom = { module = "com.meta.metavrx:metavrx-bom", version.ref = "metavrx-bom" }
metavrx-uiset-compose = { module = "com.meta.metavrx.uiset:uiset-compose-compat" }

Import the BOM and add UI Set in the app module’s build.gradle.kts:

dependencies {
    implementation(platform(libs.metavrx.bom))
    implementation(libs.metavrx.uiset.compose)
}

Apply the theme

Wrap your app content in UiSetTheme. The default values provide a complete dark theme, platform typography and shapes, and standard component dimensions.

import androidx.compose.runtime.Composable
import metavrx.uiset.compose.Surface
import metavrx.uiset.compose.button.ButtonStyle
import metavrx.uiset.compose.button.LabelButton
import metavrx.uiset.compose.theme.UiSetTheme

@Composable
fun AppContent(onContinue: () -> Unit) {
    UiSetTheme {
        Surface {
            LabelButton(
                label = "Continue",
                onClick = onContinue,
                style = ButtonStyle.Primary,
            )
        }
    }
}

UI Set components read colors, typography, shapes, dimensions, and interaction feedback from UiSetTheme. Keep the theme above every UI Set component in the composition.

Choose and customize a theme

UiSetTheme uses the dark color scheme by default. Pass darkColorScheme() or lightColorScheme() to choose explicitly. Use DimensionDefaults.Standard for the default geometry or DimensionDefaults.Compact for more compact layouts. Interactive targets remain at least 48 dp in both modes.

import androidx.compose.runtime.Composable
import metavrx.uiset.compose.theme.DimensionDefaults
import metavrx.uiset.compose.theme.UiSetTheme
import metavrx.uiset.compose.theme.lightColorScheme

@Composable
fun CompactLightTheme(content: @Composable () -> Unit) {
    UiSetTheme(
        colorScheme = lightColorScheme(),
        dimensions = DimensionDefaults.Compact,
        content = content,
    )
}

For focused changes, copy the theme value or component style you need to adjust. Keep semantic color roles together so content retains sufficient contrast against its container.

Use the component library

The SDK includes buttons, cards, checkboxes, radio buttons, switches, dialogs, dropdowns, text fields, search, navigation items, sliders, tooltips, typography, and icons. Import components from metavrx.uiset.compose and its feature packages.

This SDK is the successor to the Meta Horizon OS UI Set in Spatial SDK. If you are migrating from that library, note that current component names no longer use the Spatial prefix. For example:

Previous name	Current name
`SpatialTheme`	`UiSetTheme`
`SpatialCheckbox`	`Checkbox`
`SpatialSwitch`	`Switch`
`SpatialDropdown`	`Dropdown`
`SpatialTextField`	`TextField`
`SpatialSliderSmall`	`Slider(size = SliderSize.Small)`
`SpatialTooltip`	`Tooltip`

When migrating, also replace numbered typography such as headline1 and body1 with semantic styles such as headline, title, body, and bodySmall.

Test the interface

Test light and dark color schemes on a device. Verify that every action has a clear label, focus or hover feedback, sufficient contrast, and an interaction target of at least 48 dp.