Playground

Drive it like the glasses.

Pick a component, recolor the accent token, and copy the JSX. Use the arrow keys to move the focus ring and Enterto activate — that’s the Neural Band on the glasses.

Heart rate128BPM

Recording · pinch to log

Screen · Readout · Cue · Button · GlowIcon

Component

Accent token

Copy into your project

<GlassViewport>
  <Screen cue={<Cue emphasis="accent">Recording · pinch to log</Cue>}>
    <GlowIcon size="lg" active><HeartIcon /></GlowIcon>
    <Readout label="Heart rate" value="128" unit="BPM" />
    <div className="row">
      <Button variant="primary" icon={<GlowIcon size="sm"><CheckIcon /></GlowIcon>}>
        Log
      </Button>
      <Button>Dismiss</Button>
    </div>
  </Screen>
</GlassViewport>

/* default — blue */

Get started Back home