Components
Loading preview...
This Custom Animated Alert component is a modern alternative to the standard ShadCN alert, designed with motion-based transitions and default props for usability. By default, it displays a title and description so developers don’t need to pass in content every time, making it immediately functional out of the box. Each alert variant—success, error, warning, or info—is represented with a clear Lucide icon, ensuring quick recognition. The alert appears with a smooth fade and scale animation, and users can dismiss it using the close button for a clean experience.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/custom-alertimport CustomAlert from "@/components/ui/custom-alert";
export default function DemoOne() {
return <CustomAlert />;
}