Components
This component is a high-precision notification utility designed for modern productivity environments. It transitions from a standard alert into a temporal scheduling interface without displacing existing content, maintaining the user's focus on the active task.
Loading preview...
import { Component } from "@/components/ui/accordian-snackbar";
export default function SnackbarDemo() {
return (
/* Centered Layout:
'items-center' centers vertically.
'justify-center' centers horizontally.
*/
<div className="relative flex h-[500px] w-full items-center justify-center p-8 overflow-hidden bg-neutral-50 dark:bg-neutral-950 transition-colors duration-500">
{/* Background ambient glow */}
<div className="absolute top-1/2 left-1/2 h-64 w-64 -translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-500/5 dark:bg-indigo-500/10 blur-[100px] pointer-events-none" />
{/* The Component - Now sitting naturally in the center flex container */}
<Component />
</div>
);
}