Undo | Sean Lynch

Try it

9 × 9

ThemeSize

Archive the note, then Undo. Hover or focus the notice to pause its countdown.

The interaction. The timer begins after the complete target appears. Undo restores the host state immediately, then relights the ring.

One shared language. Permanent dots, selective light handoffs and clean outlined shells. Chalk, Carbon and Ember carry the family across sizes and themes.

Make it yours. The preview and installation use the same source. Pointer, touch and keyboard interactions share the same state model, with system reduced motion respected throughout.

Install

Add it with the shadcn CLI, or copy the source manually.

Terminal

npx shadcn@latest add https://seanportfol.io/r/dot-matrix-undo.json

Prefer a namespace? Register the registry once.

Terminal

npx shadcn@latest registry add @seanlynch=https://seanportfol.io/r/{name}.json

Terminal

npx shadcn@latest add @seanlynch/dot-matrix-undo

Usage

This is the working preview example. Save it in a separate file after installing the component. Recording, media clocks and requests are illustrative: connect their controlled state and callbacks to your application.

components/examples/undo-demo.tsx

'use client';

import { useState, useRef } from 'react';
import { MatrixUndo, type UndoNotice } from '@/components/dot-matrix/undo-entry';

export default function UndoExample() {
  const [archived, setArchived] = useState(false);
  const [notice, setNotice] = useState<UndoNotice | null>(null);
  const source = useRef<HTMLButtonElement>(null);
  const sequence = useRef(0);
  return <div style={{ display: 'grid', justifyItems: 'center', gap: 24, width: '100%' }}>
    <button ref={source} type="button" className="dm2-control" onClick={() => {
      if (archived) { setArchived(false); setNotice(null); }
      else { setArchived(true); setNotice({ id: ++sequence.current, message: 'Field notes archived', restoredMessage: 'Field notes restored' }); }
    }}>{archived ? 'Restore field notes' : 'Archive field notes'}</button>
    <MatrixUndo notice={notice} onUndo={() => setArchived(false)} onDismiss={() => setNotice(null)} returnFocusRef={source} />
  </div>;
}

API Reference

Props on Undo. Consult the included TypeScript source for supported native attributes.

PropTypeDefault

noticeA unique numeric id, message and optional restoredMessage.UndoNotice | null–

onUndoRestore the original host state.(id: number) => void–

onDismiss / onExpireDismiss is required; expiry notification is optional.(id: number) => void–

durationMilliseconds available for undo; defaults to 8000.number–

pausedPause the notice clock without changing its state.boolean–

returnFocusRefElement to focus before the action disappears.RefObject<HTMLElement | null>–

gridFixed cornerless lattice; glyphs are authored for each resolution.5 | 7 | 9 | 119

size48 / 56 / 64px primary controls with matching insets.'compact' | 'regular' | 'large''regular'

glyphSizingThe accepted optical scale is 22 / 24 / 26px.'optical' | 'footprint' | 'dot-weight''optical'

slowSlows animation only, never gestures, operation time or media clocks.booleanfalse

reducedMotionImmediate state clarity without indirect travel or activity loops. The system preference takes precedence.booleanfalse

disabledSuspend interaction and cancel active gestures.booleanfalse

Information

Category: Dot Matrix
Files: components/dot-matrix/MatrixSignal.tsx
components/dot-matrix/MatrixUndo.tsx
components/dot-matrix/collectionSignals.ts
components/dot-matrix/context.tsx
components/dot-matrix/dot-matrix.css
components/dot-matrix/glyphs.ts
components/dot-matrix/motion.ts
components/dot-matrix/tokens.ts
components/dot-matrix/undo-entry.ts
components/dot-matrix/useCollectionMotion.ts
Dependencies: React 18.2 or 19 and React DOM; no additional runtime packages
Compatibility: React 18.2 / 19, TypeScript, CSS imports, Modern browsers
Version: 0.1.0
Updated: Oct 1, 2026
Registry: dot-matrix-undo