Getting started

GlassKit UI is a React component library for Meta Ray-Ban Display apps. It ships an SDK (the focus engine, the sensor + Neural Band hooks, GlassViewport, and the on-lens stylesheet) plus 48 styled components you vendor and own — built to the premium-surfaces HUD language (calm dark base, popping gradient surfaces, gradient icon plates, glanceable type).

Fastest path: scaffold an app

One command gives you a complete Vite + React glasses app — the required 600×600 + mrbd-web-app-capable meta tags, GlassViewport and D-pad navigation pre-wired, ready to deploy:

npm create glasskit my-app

Add -- --template relay for the phone text-relay starter (free-form text with no keyboard or mic — see Patterns).

cd my-app && npm run dev, then drive it with your keyboard: arrow keys move focus (that's a Neural Band swipe), Enter activates (a pinch), Escape goes back. Skip to step 4 to add components.

The bare glasskit package on npm is unrelated to this project — always use create-glasskit, @glasskit-ui/react, and @glasskit-ui/cli.

Or add GlassKit to an existing app

1. Install the SDK

react and react-dom 19 are peer dependencies.

npm install @glasskit-ui/react

2. Import the styles

In your app's CSS entry (after Tailwind, if you use it):

@import "tailwindcss";
@import "@glasskit-ui/react/styles.css";

3. Build

Wrap your app in GlassViewport and call useDpad() once near the root. Any element with the focusable class joins D-pad navigation.

import { GlassViewport, useDpad } from "@glasskit-ui/react";

export function App() {
  useDpad(); // arrow keys → spatial focus, Enter → click

  return (
    <GlassViewport>
      <div className="screen">
        <h1>Hello, glasses</h1>
        <button type="button" className="focusable">
          Get directions
        </button>
      </div>
    </GlassViewport>
  );
}

4. Add components

Vendor the source into your project with the CLI — it resolves dependencies, writes the files to components/glasskit/, and installs any npm deps they declare. Yours to edit.

npx @glasskit-ui/cli add screen readout button

Browse all 48 in the Components section — each with a live 600×600 preview, props, and usage. Click the Meta logo on any preview to scan a QR and run that component as an app on your glasses.

On-device behaviors worth knowing

• Sensors auto-wire. Sensor-driven components self-connect when their data prop is omitted: <Compass /> follows live head orientation, <DirectionArrow target={{lat, lon}} /> aims via GPS + heading, <Clock /> ticks itself. Pass the prop and they're fully controlled — the prop always wins.
• The system back gesture is real history. On glasses OS v125.1+ a middle pinch pops browser history (your page gets popstate). Use <Navigator> and every push adds a history entry, so back just works — at the root it exits to the system, exactly like Android.
• Input is keys. Swipes arrive as arrow-key events and pinch as Enter — no cursor, touch, or text input. Anything interactive needs the focusable class (every GlassKit component already has it).