GlassKit

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 */