GlassKit

The component library
for the glasses.

48 React components for Meta Ray-Ban Display — a spatial focus engine, Neural Band input, system-back navigation, and everything a glanceable in-lens display needs. Open source.

npx @glasskit-ui/cli add button

On the lens

Made for the lens.

A calm dark base, surfaces that pop — top-lit gradients, hairline light edges, soft depth — and one blue accent. Tuned for the 600×600 waveguide: big glanceable type, tabular numerals, and no frosted blur anywhere near the lens.

Heart rate128BPM

Recording · pinch to log

Live · Screen · Readout · Button · GlowIcon

01 / Components

48, every HUD job

Readouts, lists, timers, comms and launch screens — plus the world-anchored set (DirectionArrow, Compass, Pin, Callout) a watch kit can't do. Premium surfaces tuned for a 600×600 lens, never washed-out blur.

02 / Input

Spatial focus engine

Arrow keys and the Neural Band move a focus ring to the nearest target — a superset of Meta's .focusable, tuned for a 600×600 lens. The same code runs on your desk and on the glasses.

03 / Yours to own

Copy in, no lock-in

Vendor the source with one command — @glasskit-ui/cli add — straight into your project, yours to edit. The SDK ships the hooks, viewport and focus engine from npm.

Free. Open source. Yours to own.

Install the SDK from npm, then @glasskit-ui/cli add the components straight into your project. Your code to edit — no lock-in, no black box.