Components
Loading preview...
This SignInCard component is a modern, theme-aware login interface built with Shadcn UI and Tailwind CSS. It closely mirrors Microsoft’s official sign-in design, featuring the authentic Microsoft logo, a clean header, an input field for email or username, and action links for account creation or password recovery. The footer provides clear navigation with Back and Next buttons, styled for accessibility in both light and dark modes. Its responsive, card-based layout makes it suitable for authentication flows in SaaS platforms, enterprise apps, and portals where a familiar, professional sign-in experience enhances user trust and usability.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/sign-in-cardimport SignInCard from "@/components/ui/sign-in-card";
export default function DemoOne() {
return <SignInCard />;
}