Field Toast | Sean Lynch

Made of something. Battered olive communications hardware, a small signal lamp and the same recessed phosphor display as the relay button.

The moment. Incrementing signal receives a message. Text interference resolves to stable centered text; the message stays open while hovered or focused.

Yours to adapt. Copy the component source, styles and materials. Functional text stays live, effects respect reduced motion, and the artwork requires no remote hosting.

Try it

Send a notification. The receiver appears outside this preview.

Install

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

Release candidate: public installation becomes available after deployment. Use an existing React 19 project with shadcn initialized and a components.json file. The CLI installs the source, CSS, embedded materials, MIT licence and font notices together.

Terminal

npx shadcn@latest add https://seanportfol.io/r/grimkit-field-toast.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/grimkit-field-toast

Usage

Copy this example into a separate file, not over the installed component. The @/ alias points to your source root. In Next.js this is a Client Component; Vite also accepts the directive. Replace demonstration actions with your application logic.

components/examples/field-toast-demo.tsx

"use client";

import { useState } from "react";
import { FieldToast } from "@/components/grimkit/field-toast";

export default function Example() {
  const [signal, setSignal] = useState(0);
  return <>
    <button type="button" onClick={() => setSignal(count => count + 1)}>Show notification</button>
    <FieldToast signal={signal} message="Configuration saved" />
  </>;
}

API Reference

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

PropTypeDefault

signalIncrement after an application event to open or restart the 6.5-second toast. Start at zero to keep it initially hidden; zero does not dismiss an already open toast. Hover or focus pauses dismissal. Escape and the close button dismiss it.number–

messageVisible message and live announcement.string–

announceSet false when the caller already announces the result.booleantrue

effectsAuto honours reduced motion; off disables decorative motion and particles."auto" | "off""auto"

Information

Category: GrimKit
Files: components/grimkit/field-toast.tsx
components/grimkit/modern-field-toast.tsx
components/grimkit/modern-foundation.css
components/grimkit/modern-field-receiver-v1-materials.ts
components/grimkit/modern-fieldtoast.css
components/grimkit/modern-fieldtoast-materials.css
components/grimkit/modern-relay-display.css
components/grimkit/LICENSE.txt
components/grimkit/Saira-OFL.txt
components/grimkit/JetBrainsMono-OFL.txt
Dependencies: React 19 and React DOM 19; no additional runtime packages
Compatibility: React 19, TypeScript, CSS imports, Modern browsers
Version: 0.2.0
Updated: Sep 22, 2026
Registry: grimkit-field-toast