@loupeink/ui

React UI components for Loupe — the screen capture and annotation tool.

Provides the annotation overlay, feedback card, and shared UI primitives used across the Loupe desktop app and web SDK.

Install

npm install @loupeink/ui
# or
yarn add @loupeink/ui
# or
pnpm add @loupeink/ui

Peer dependencies: React 18+, @loupeink/core

Components

Annotation & Feedback

Component	Description
FeedbackFilter	Filter bar for feedback lists by severity and status
SeverityBadge	Badge displaying critical, major, minor, or suggestion
TagPicker	Tag selection input for feedback items
RecordingIndicator	Animated indicator shown while screen recording is active
StreamingTranscript	Displays live STT transcript during recording
TimestampInput	Time-coded input for annotating at specific timestamps

Primitives

Headless-style primitives built on shadcn/ui patterns:

Badge, Button, Card, Dialog, Input, Label, Select, Textarea, Tooltip

Usage

import { SeverityBadge, FeedbackFilter } from '@loupeink/ui';

function MyFeedbackList() {
  return (
    <>
      <FeedbackFilter onFilterChange={(f) => console.log(f)} />
      <SeverityBadge severity="critical" />
    </>
  );
}

Part of the Loupe ecosystem

• @loupeink/core — platform-agnostic types, stores, and sync services
• @loupeink/ui — this package, React UI components
• @loupeink/web-sdk — drop-in feedback widget for any web app

License

MIT