Error

Component 13

About

Error Overlay This component displays a modal overlay, typically used for showing compile-time errors or critical alerts, mimicking the style of modern development tools like Vite. It is fully accessible and supports both light and dark themes out-of-the-box.

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

Code

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

Usage.tsx

import { useState } from "react";
import { Button } from "@/components/ui/button"; // Adjust path as needed
import { ErrorOverlay } from "@/components/ui/error"; // Adjust path as needed

const Code = ErrorOverlay.CodeSnippet; // Using the exported helper for cleaner syntax

const ErrorOverlayDemo = () => {
  const [isOverlayOpen, setIsOverlayOpen] = useState(false);

  // Define the content for the overlay message using JSX and the CodeSnippet helper
  const errorMessage = (
    <>
      <p>
        Click outside, press <Code>Esc</Code> key, or fix the code to dismiss.
      </p>
      <p>
        You can also disable this overlay by setting <Code>server.hmr.overlay</Code> to <Code>false</Code> in <Code>vite.config.ts</Code>.
      </p>
    </>
  );

  return (
    <div className="flex min-h-screen w-full flex-col items-center justify-center gap-4 bg-background p-4">
      <div className="text-center">
        <h1 className="text-2xl font-bold">Error Overlay Demo</h1>
        <p className="text-muted-foreground">Click the button to simulate an error.</p>
      </div>
      
      <Button onClick={() => setIsOverlayOpen(true)}>
        Trigger Error
      </Button>

      <ErrorOverlay
        isOpen={isOverlayOpen}
        onClose={() => setIsOverlayOpen(false)}
        title="The requested module '/src/components/ui/basic-toast.tsx' does not provide an export named 'useToast'"
        message={errorMessage}
      />
    </div>
  );
};

export default ErrorOverlayDemo;