Sketch Toast

Component

About

A transient hand-drawn notification card that slides in with a sketchy settle wobble, built on Radix Toast for stacking, auto-dismiss, and an accessible live region.

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

Code

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

Usage.tsx

"use client";

import Toast, { ToastProvider } from "@/components/ui/toast";
import { useState } from "react";

export default function ToastWarningDemo() {
  const [open, setOpen] = useState(false);

  return (
    <ToastProvider position="top-right">
      <div className="flex min-h-[200px] w-full items-center justify-center bg-background p-10 text-foreground">
        <button
          onClick={() => setOpen(true)}
          className="rounded-md border border-foreground/70 bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm transition hover:bg-muted"
        >
          Show toast
        </button>
        <Toast
          open={open}
          onOpenChange={setOpen}
          variant="warning"
          title="Unsaved changes"
        >
          Finish verifying your payout details before you leave this page.
        </Toast>
      </div>
    </ToastProvider>
  );
}