Installation
Updated: Sep 24, 2026
Install UI Toolkit for Meta Ray-Ban Display from npm, then render the application inside
App. App loads the component styles and provides focus navigation, overlays, and the other runtime services that toolkit components rely on.Requirements
| Requirement | Detail |
|---|---|
react | ^19.2.7 peer dependency (React 19.2.7 or a later 19.x release). |
react-dom | ^19.2.7 peer dependency (React DOM 19.2.7 or a later 19.x release). |
react-router-dom | ^7.17.0. Optional peer dependency, required only if you use the @wearables-ui-toolkit/mrbd/react-router subpath. |
Module format | ECMAScript modules only. The package has no CommonJS build. Use a bundler or runtime that supports ECMAScript modules. |
Node | Version 18 or later for package tooling. |
The library uses the React Compiler. Its React peer dependencies support React 19.2.7 or a later 19.x release.
Install from npm
Install the main package and its React peer dependencies:
npm install @wearables-ui-toolkit/mrbd react@^19.2.7 react-dom@^19.2.7
The main package installs its Foundation and shape dependencies transitively. Most applications do not need to list those packages separately.
Install React Router only when the application uses the router integration:
npm install react-router-dom@^7.17.0
Install the optional icon collection separately when the application uses published toolkit icons:
npm install @wearables-ui-toolkit/icons
Advanced integrations that use Foundation without the component package for Meta Ray-Ban Display glasses can install Foundation directly:
npm install @wearables-ui-toolkit/foundation react@^19.2.7 react-dom@^19.2.7
| Package | Use it for | npm |
|---|---|---|
@wearables-ui-toolkit/mrbd | The app shell and component catalog for Meta Ray-Ban Display glasses. Install this package for most applications. | |
@wearables-ui-toolkit/foundation | Lower-level primitives, materials, motion, focus navigation, and utilities. The main package installs and re-exports it. | |
@wearables-ui-toolkit/icons | Optional named icon exports, individual assets, and searchable icon metadata. | |
@wearables-ui-toolkit/androidx-shapes | Smooth-shape geometry installed transitively by Foundation. Most applications should not install it separately. |
Commit the application’s npm lockfile so teammates and build systems resolve the same toolkit versions.
No font package is needed.
App loads the text font at runtime as described in Render a first screen.Optional coding-agent skills
The npm packages do not include the optional coding-agent skills. They are not required to build or run an application. If you use Muse Code, Codex, or Claude Code, follow Coding-agent skills to install them for your account or one project.
Styles
Each component imports the CSS module it owns. The package build collects those modules into a stylesheet, and
App loads that stylesheet automatically. An application should not import a toolkit-wide CSS file manually.The stylesheet declares toolkit custom properties globally but scopes its element reset to the toolkit subtree, so unrelated host-document styles remain unchanged. The automatic stylesheet import follows the application’s module order. Import application override CSS from the entry module after the module that renders
App when equal-specificity application rules must win.Size the mount root and set the window background
Give the mount element a height because
App fills its parent. Paint the document and mount root with the window-background semantic token so overscroll and other areas outside the app root match App. Use the token rather than a literal color.html,
body,
#root {
height: 100%;
background-color: var(--uit-color-background-window);
}
Render a first screen
Render every toolkit surface inside
App. It loads styles and provides the runtime services required by toolkit components: fonts, focus navigation, overlays, and toast presentation.import { createRoot } from 'react-dom/client';
import { App, ListItem, Page, VerticalList } from '@wearables-ui-toolkit/mrbd';
function Inbox({ onOpenThread }: { onOpenThread: (id: string) => void }) {
return (
<Page headerText="Inbox" headerMetadata="2 new">
<VerticalList insetForHeader ariaLabel="Inbox">
<ListItem
title="Sam Rivera"
subtitle="On my way"
onClick={() => onOpenThread('sam')}
/>
<ListItem
title="Field Ops"
subtitle="Route updated"
onClick={() => onOpenThread('ops')}
/>
</VerticalList>
</Page>
);
}
createRoot(document.getElementById('root')!).render(
<App>
<Inbox onOpenThread={id => console.log('open', id)} />
</App>,
);
Continue with the
App reference for its props and runtime services, and the Page reference for route layout and header behavior.Package entry points
Import components from the package root or a supported component subpath. Both forms resolve to the same implementation:
import {Button} from '@wearables-ui-toolkit/mrbd';
import {ListItem} from '@wearables-ui-toolkit/mrbd/ListItem';
The application must still render
App at its root when using component subpaths. Router-aware helpers use a separate subpath and require the optional react-router-dom peer dependency:import {
ReactRouterNavigationProvider,
ReactRouterPageTransition,
ReactRouterPreloadLink,
} from '@wearables-ui-toolkit/mrbd/react-router';
| Import specifier | Public contents |
|---|---|
@wearables-ui-toolkit/mrbd | The complete component API for Meta Ray-Ban Display glasses plus the re-exported Foundation API. |
@wearables-ui-toolkit/mrbd/styles.css | Compatibility stylesheet bundle. Ordinary applications should let App load styles automatically. |
@wearables-ui-toolkit/mrbd/react-router | Optional React Router integration. This is the only entry point that requires react-router-dom. |
@wearables-ui-toolkit/mrbd/<Component> | Supported component subpaths such as @wearables-ui-toolkit/mrbd/Button. |
@wearables-ui-toolkit/foundation | Lower-level primitives, hooks, materials, motion APIs, and types. The main package re-exports this interface. |
@wearables-ui-toolkit/foundation/components/<Component> | Supported Foundation component subpaths such as @wearables-ui-toolkit/foundation/components/Container. |
@wearables-ui-toolkit/icons | Optional named icon exports and documented asset subpaths. |
Only subpaths declared in a package’s
exports map are public. Do not import from dist internals. Standalone hooks, enums, motion constants, material APIs, and other exports without a documented subpath come from the package root.A supported component subpath also exports that component’s props type. Companion exports come from their owning component subpath; for example,
CardAboveScrim comes from @wearables-ui-toolkit/foundation/components/Card.TypeScript
Type declarations ship with the package, so no separate
@types package is needed. Because the toolkit ships only ECMAScript modules, use a module-resolution mode that understands the exports map, such as "bundler", "node16", or "nodenext".
© 2026 Meta