---
url: /foundations/xr/components/overview.md
description: Learn how Material 3 Expressive components adapt to extended reality devices
---

# XR components

Learn how Material 3 Expressive components adapt to extended reality devices

**Overview** · [App bars](app-bars.md) · [Dialogs](dialogs.md) · [Nav bar](nav-bar.md) · [Nav rail](nav-rail.md) · [Toolbars](toolbars.md)

![XR components](/assets/d24f9b3f-mrombasj-hero-image.Sz8wMJQe.webp)

* Leverage depth and space to create believable environments
* Design for comfort to minimize motion sickness and physical strain
* Map interactions, like gaze and gestures, to real-world expectations
* Group UI elements on floating spatial panels
* Provide feedback through spatial audio, haptics, and visual cues

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxffyh5-toolbars-xr-06%20(2).mp4?alt=media" aria-label="Animation showing a toolbar changing from 2D to 3D."></video>

A toolbar’s behavior and placement changes from a 2D to a 3D experience

## Material XR components

The following Material components are adapted for XR:

* [App bars](app-bars.md)
* [Dialogs](dialogs.md)
* [Navigation bar](nav-bar.md)
* [Navigation rail](nav-rail.md)
* [Toolbars](toolbars.md)

![Side view of an XR dialog showcasing spatial elevation.](/assets/fef7230c-moxgb0ta-06.BWlFYfGB.webp)

A dialog can be spatially elevated on the Z-axis above spatial panels