Glasskit UI Studio

Browse 46 React components for Meta Ray-Ban Display glasses in a 600x600 lens simulator.

Glasskit UI Studio — browse all 46 Meta Ray-Ban Display components in a 600×600 lens simulator with a D-pad focus engine

How to use Glasskit UI Studio

  1. Search the 46 components or filter by one of the eight HUD jobs.
  2. Click a component to preview it live inside the 600x600 lens.
  3. Click the lens and use arrow keys to move D-pad focus between elements.
  4. Try the on-screen D-pad to see directional focus scoring in action.
  5. Copy the install command or the import line for the component you need.

Features

  • All 46 registry components with real props from the component docs
  • 600x600 lens simulator: black renders transparent on the waveguide, as on real glasses
  • Working D-pad focus engine (useDpad/scoreRect): arrow keys move focus by direction
  • Neural Band input model: gestures arrive as arrow and Enter keys
  • SDK surface: GlassViewport, useDpad, scoreRect, sensor hooks and system-back navigation
  • Eight HUD jobs: Monitor, Navigate, Guide, Caption, Notify, Capture, Annotate, Launch

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.