Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/errorimport { 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;