Undo Feedback

Component 8

About

A dismissible "item removed" snackbar card with an Undo button that shows pending, restored and error states while an async restore action runs, ported from SL UI Library's vanilla-JS Matte Feedback kit (MIT, credit to original author SLtowl).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Undo Feedback to your project and fits it to your theme.

Code

How Undo Feedback is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import UndoFeedback, {
  type UndoFeedbackHandle,
} from "@/components/ui/matte-undo-feedback";

export default function MatteUndoFeedbackDemo() {
  const ref = React.useRef<UndoFeedbackHandle>(null);

  const handleUndo = React.useCallback(
    () =>
      new Promise<void>((resolve) => {
        setTimeout(resolve, 850);
      }),
    [],
  );

  return (
    <div className="w-full min-h-screen flex items-center justify-center bg-[#efefef] p-7">
      <div className="w-full" style={{ maxWidth: 320 }}>
        <UndoFeedback ref={ref} onUndo={handleUndo} />
        <div className="fb-tools">
          <button
            type="button"
            className="fb-button"
            onClick={() => ref.current?.show()}
          >
            Remove item
          </button>
        </div>
        <p className="fb-caption">A local preview. No real item is removed.</p>
      </div>
    </div>
  );
}