mrbd-ui-kit was an open-source React component library for web apps on Meta Ray-Ban Display glasses. It encoded the display's rules, so developers could ship an app without rediscovering them. When Meta published the official toolkit, the kit shipped a final release and pointed everyone to it.
The display is unlike any screen the web was designed for. Black is transparent, pure white ghosts, drop shadows look like dirt on the lens, and there is no pointer. Every app I built hit the same walls, so I put the answers in a package.
The kit existed to make web apps look native. Once Meta shipped the real design system, a lookalike next to the original was a losing race. The kind thing to do for users was to point them at the original and stop.
Timeline
May 2026
Extracted from DisplayList
Pulled the glasses UI out of DisplayList.fun into its own package. A day later it had a button redesign, linting, an MIT license, and a GitHub Action that publishes to npm.
- DisplayRoot sets the 600 by 600 viewport, focus context, and key handling
- Text enforces weight 500 and trims the text box
- Outer glows instead of drop shadows
- One accent variable themes every surface
- Device detection on the client and the server
May 2026
Public site and five releases
Versions 0.3 through 0.5 in two days, a docs and demo site at mrbd.fun that renders inside a glasses-sized frame, and DisplayList switched onto the package the same day.
May 2026
Focus engine and localization
Spatial focus groups, session-restore on back navigation, a preferred-focus hook, right-to-left support, and AI-written release notes in the release workflow.
September 2026
Final release and sunset
Meta published the official UI Toolkit for Ray-Ban Display, the design system this kit set out to approximate. Version 0.6.0 went out as the last feature release. A deprecation notice, a migration table for every component, and an archived repository followed.
- Back navigation from the keyboard, matching the Back gesture on the glasses
- One glow ring that travels between focused elements
- A glow-stroke button variant
- Semantic tokens for surfaces, borders, and text, plus a display-safe palette
- Every component mapped to its equivalent in Meta's toolkit
- Deprecated on npm; existing installs keep working
Impact
- Every DisplayList screen shipped on the kit, and any React developer could build for the glasses in an afternoon.
- Automated releases with npm provenance and AI-written notes, so shipping a fix was one version bump.
- Retired with a migration path for every component, so nobody is left guessing what to use instead.
My role
Sole author and maintainer: the API, the focus engine, the docs and demo site, the release pipeline, and the sunset.
- React
- Tailwind CSS
- npm
- Next.js
- Vercel