Components
Loading preview...
Full-screen preloader that exits with a slide-up animation when the page is ready.
npx shadcn@latest add https://21st.dev/r/gaxocif204/preloaderimport Preloader from "@/components/ui/preloader";
export default function DemoOne() {
return (
<div className="h-dvh w-full bg-gradient-to-r from-indigo-700 flex flex-col items-center justify-center gap-4 text-center px-4">
<Preloader />
<h1 className="text-white text-5xl font-bold tracking-tight">
Something..
</h1>
<p className="text-gray-200 text-lg max-w-md">
A minimal, smooth preloader for your next React project.
</p>
<button
onClick={() => window.location.reload()}
className="mt-4 px-6 py-2 text-sm bg-gray-100 text-black rounded-full hover:bg-white cursor-pointer">
Replay
</button>
</div>
);
}