Overview

Updated: Sep 24, 2026

Overview

UI Toolkit (the toolkit) is a React component library for Meta Ray-Ban Display glasses. It provides finished components, semantic tokens, container materials, motion, and focus-navigation infrastructure. Applications supply content and callbacks while the toolkit keeps shape, material, focus, and typography consistent.

Start with what the toolkit provides, then follow Installation to install the packages from npm and render a first screen. If you use Muse Code, Codex, or Claude Code, install the optional coding-agent skills to give the agent toolkit-specific component, theming, navigation, and validation guidance.

Use the UI Toolkit for Meta Ray-Ban Display glasses section in the sidebar to navigate the getting-started guides, foundations, icons, and component documentation.

Design for Meta Ray-Ban Display Glasses

Meta Ray-Ban Display draws content as light over the wearer’s view and uses directional controls instead of a touch surface. Three characteristics shape its interfaces:

Focus is the cursor. Directional input moves focus among interactive elements. Use toolkit components so focus behavior remains coordinated.
Light is additive. Every displayed element adds brightness over the wearer’s view. Use the toolkit’s semantic colors and materials to preserve legibility as the surroundings change.
Space is negotiated, not fixed. Components size themselves from content, and layouts respond to the available viewport. Avoid assumptions based on a fixed device size.

Read What is the toolkit? for the runtime model, library organization, and application responsibilities.

Explore the documentation

Get started: Install the npm packages, render the application inside App, learn semantic tokens, and theme the application.
Build complete screens: Follow the guides for application structure, screen layout, navigation and focus, and application patterns.
Choose components: Use the component selection guide, then browse the Meta Ray-Ban Display glasses components and Foundation.
Use icons: Install and browse the optional icon collection, or learn how toolkit icon slots handle custom assets, in Icons.
Customize and validate: See theming and customization, composition, and accessibility, performance, and validation.

Installation documents package entry points and compatibility boundaries. The package’s exported TypeScript declarations are the authoritative prop-level reference.

The toolkit source is available in the GitHub repository⁠.