pro157 lines · framer-motion

Approval Inbox

Every pending request, one keyboard-fast list. A notification inbox for approvals: new requests slide in, risk dots, unread state, a high-risk filter, bulk select, and Gmail-style j/k/x/a/r keys.

Use it for: Ops consoles, team leads approving many agents, mobile triage.
Themes: Light + dark
License: Commercial use (draft)

Live

Inbox

2 new

Merge PR #482 into main
coder · 2m
Refund €129 to order #9921
support · 5m
Drop table sessions_old
ops · 11m
Publish release notes 4.12
writer · 18m

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface InboxItem {
  id: string;
  agent: string;
  title: string;
  risk: "low" | "medium" | "high";
  age: string;
  unread?: boolean;
}

export interface ApprovalInboxProps {
  items?: InboxItem[];
  /** New requests arrive on a timer (demo). */
  autoplay?: boolean;
  onResolve?: (ids: string[], decision: "approved" | "rejected") => void;
  className?: string;
}

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→New items arrive at the top with an orange flash.
→Hover shows Approve / Reject; resolved rows slide out and a toast confirms.
→Bulk bar appears when items are selected.
→Keys: j/k move, x select, a approve, r reject.

Accessibility

✓List is focusable with keyboard instructions in its label.
✓Every row has labelled checkbox and buttons.
✓Toast is role=status.
✓Honours prefers-reduced-motion.