Documentation

Installation

npm install inlet-ui

Works with Electron 28+ and React 18+. A prebuilt universal helper reads the exact notch size and plays haptics, so there is nothing to compile.

Setup

import { Notch, NotchActivity, notch } from 'inlet-ui/react'

export function App() {
  return (
    <>
      <Notch />
      <NotchActivity
        leading={<AlbumArt />}   // left of the camera
        trailing={<Waveform />}  // right of the camera
        expanded={<Player />}    // on hover
      />
      <button onClick={() => notch.peek('Copied to clipboard')}>Copy</button>
    </>
  )
}

API

From the main process

createNotch() returns a handle, so tray menus, background jobs and system events can peek without going through your renderer.

// The main process can drive the notch too
import { createNotch } from 'inlet-ui/electron'

const notch = await createNotch({ entry: 'dist/index.html' })

notch.peek('Build succeeded', { type: 'success' })
notch.expand()
notch.on('expand', () => console.log('notch opened'))

Drag and drop

Give an activity onDrop and dragging files, links or text over the notch opens it into a drop target that says dropLabel. The highest-priority activity that takes drops gets them. With no activity taking drops, onDrop on the notch itself does.

// Drag files, links or text onto the notch. While something is over it,
// the notch opens into a drop target.
<NotchActivity
  label="Shelf"
  dropLabel="Drop to shelve"
  onDrop={({ files, paths }) => notch.peek(`Shelved ${files.length} files`, { type: 'success' })}
  expanded={<ShelfView />}
/>

Styling

background fills the notch below the camera band, which stays black like the hardware. accent colours peek icons, the spinner and the keyboard focus ring.

// The band across the camera stays black, like the hardware.
<Notch background="linear-gradient(#1e1b4b, #4338ca)" accent="#ffd60a" />

Accessibility

Peeks are announced as they appear: through a live region on the web, and VoiceOver in SwiftUI. Name activities with label. On the web the notch has a keyboard handle: Tab to it, Enter opens it and moves focus inside, Escape closes it and returns focus. In SwiftUI, call expand(focus: true) from a shortcut to give the notch the keyboard; Escape closes it. Reduced motion swaps the springs for ones that don't bounce.

Design tokens

Shape and motion are defined once in design/tokens.json and generated into Swift and TypeScript. The React renderer runs the same spring as SwiftUI's .spring(response:dampingFraction:), so both platforms move the same way, even mid-animation.

{
  "spring": {
    "open":  { "response": 0.38, "dampingFraction": 0.8 },
    "close": { "response": 0.3,  "dampingFraction": 1.0 }
  },
  "radius": {
    "rest":     { "top": 6,  "bottom": 10 },
    "toast":    { "top": 8,  "bottom": 18 },
    "expanded": { "top": 12, "bottom": 26 }
  }
}

How the Electron version works

The notch is a transparent, non-activating panel above the menu bar, on every Space and over full-screen apps. It ignores the mouse until the pointer is over the notch's current shape, so clicking it never takes focus from the app you were using. The housing is measured with NSScreen.auxiliaryTopLeftArea through a small N-API helper.

For agents

Plain-text setup instructions for coding agents live at /llms.txt.