Free React components and hooks for Meta Ray-Ban Display apps
GlassKit UI (@glasskit-ui/react) is the free, MIT-licensed React library for Meta Ray-Ban Display Web Apps: GlassViewport, the useDpad focus system, useNavigator, and typed sensor hooks.
TL;DR: GlassKit UI is the free, open-source (MIT) React
library for Meta Ray-Ban Display Web Apps: the npm package
@glasskit-ui/react. It ships the platform primitives Meta
doesn't: the 600 × 600 GlassViewport, the useDpad() focus system,
useNavigator() stack navigation, typed sensor hooks, and an
additive-display stylesheet. It's the foundation
GlassKit Studio and the GlassKit Stack build on.
npm install @glasskit-ui/reactimport { GlassViewport, useDpad } from "@glasskit-ui/react";
import "@glasskit-ui/react/styles.css";
function App() {
useDpad();
return (
<GlassViewport>
<button className="focusable" onClick={start}>Start</button>
<button className="focusable" onClick={openSettings}>Settings</button>
</GlassViewport>
);
}That's a complete, on-platform glasses app: 600 × 600, additive-ready, D-pad navigable, testable in your browser with arrow keys.
Why a library is needed at all
Meta Ray-Ban Display Web Apps (docs at wearables.developer.meta.com) are plain web apps with three constraints no web framework understands natively: a fixed 600 × 600 additive display where black renders transparent, input that arrives only as Arrow keys + Enter from the Meta Neural Band, and no back-navigation API. GlassKit UI is that missing platform layer, typed and tested.
The API surface
| Export | What it does |
|---|---|
<GlassViewport> | The 600 × 600 root container, pre-configured for the additive display (dark base, light ink, visible dev frame) |
useDpad() | One real-focus cursor over .focusable elements; spatial scoring picks the nearest candidate in the pressed direction, Enter selects |
useFocusedKey(), FocusScope, seedFocus, getFocusables | Focus helpers for grids and lists (focusable cells, scoped focus regions, initial focus) |
scoreRect, Dir | The pure spatial-scoring function, exported for unit-testing custom layouts |
useNavigator() | Stack navigation as a hook: push / pop / popToTop mapped onto browser history, so the system back gesture just works and reloads restore the screen |
useBackHandler() | Let an overlay or sheet intercept back before the stack pops |
useDeviceOrientation() | Compass heading + tilt (alpha/beta/gamma), re-render-guarded for 60 Hz streams |
useDeviceMotion() | Acceleration per axis, same guard pattern |
useGeolocation() | Live GPS via the paired phone: { position, error } |
useNeuralBand() | The richer gesture event channel (pinch etc.), separate from D-pad basics |
useFeedback(), buzz() | The haptics seam: no haptics API reaches Web Apps yet, so this no-ops today and lights up the day it ships |
orientationEqual, motionEqual | Equality helpers the sensor hooks use to skip redundant re-renders |
styles.css, theme.css | The additive-display design tokens, .focusable focus ring, and semantic layout classes |
The focus model in one paragraph
Neural Band swipes arrive at your app as arrow-key events; the pinch
arrives as Enter. useDpad() (called once, near the root) listens for
those keys and moves real DOM focus between elements carrying
className="focusable", using a scored algorithm that balances
distance along the travel direction against perpendicular drift. Enter
fires the focused element's onClick. Because it's real focus and
real keys, the exact same build runs in Chrome with your keyboard and
on the glasses with the Neural Band.
Try it without hardware
Run your app in a desktop browser, size the viewport 600 × 600, and drive it with arrow keys. Chrome DevTools → Sensors simulates orientation and GPS. The hardware is only needed for final on-device polish.
Where it fits in the GlassKit ladder
GlassKit UI is free forever (MIT). Both paid products are built on it:
- GlassKit Studio generates complete glasses apps from a
prompt; every generated app imports
@glasskit-ui/react. - The GlassKit Stack is the production monorepo (glasses app
- companion site + backend) for shipping a commercial product on the same primitives.
The interactive docs and playground live at glasskit.app/ui.
Related reading
GlassKit Stack vs building from scratch
What the $99 GlassKit Stack actually replaces: the auth, payments, backend, and companion-site wiring every commercial Meta Ray-Ban Display app needs before its own features.
Build a glasses app from a prompt: how GlassKit Studio works
GlassKit Studio turns a text prompt into a working, publishable Meta Ray-Ban Display app: plan, generate, preview in a virtual glasses display, edit by chat, and publish to a URL with a QR code.