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 44 styled components you vendor and own. All of it is built to the 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. You get 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

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 44 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).