Components
Loading preview...
This component renders an animated SVG warning graphic with a triangle, exclamation mark, stripes, and path outlines, using framer-motion for a layered entrance sequence with configurable animation speed and color. It supports motion-reduction detection, progressive draw effects, and modular fade/scale transitions for accessibility and customization. Perfect for alert banners, system status messages, onboarding visuals, HUD, sci-fi or gaming themes, or any UI needing a bold, animated warning indicator.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/warning-graphic"use client";
import {WarningGraphic} from "@/components/ui/warning-graphic";
export default function Demo() {
return (
<div className="min-h-screen flex items-center justify-center bg-background">
<WarningGraphic
width={600}
height={230}
enableAnimations={true}
animationSpeed={1.5}
className="drop-shadow-lg"
/>
</div>
);
}