Components
Loading preview...
A stunning, open-source multi-step authentication UI component for modern web applications. Built with React, TypeScript, and Framer Motion, it delivers a visually captivating and highly interactive sign-up experience out-of-the-box. Key features include a sleek glassmorphism design, a fluid animated gradient background, delightful micro-interactions, and rewarding user feedback with loading states and a built-in confetti celebration on success. Perfect for developers looking to elevate their project's user onboarding with a polished and professional auth screen.
@easemize
npx shadcn@latest add https://21st.dev/r/easemize/sign-upimport { AuthComponent } from "@/components/ui/sign-up";
// A simple placeholder logo for demonstration
const CustomLogo = () => (
<div className="bg-blue-500 text-white rounded-md p-1.5">
<svg
className="h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</div>
);
export default function CustomAuthDemo() {
return (
<AuthComponent
logo={<CustomLogo />}
brandName="MyWebApp"
/>
);
}