The Google 2-Step Verification Dialog is a modern and secure authentication setup component built with ShadCN UI and React. It guides users through enabling two-factor authentication (2FA) using Google Authenticator in a clean, step-by-step interface. The dialog opens centrally on the screen and walks the user through installing the app, adding their account using a setup key, and verifying a six-digit code. Designed with accessibility and clarity in mind, it features subtle animations, semantic structure, and responsive design. This component enhances account security while maintaining a smooth and minimal user experience — ideal for integration in dashboards, user settings, or onboarding flows.
import Google2FADialog from "@/components/ui/google2fadialog"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
export default function TwoFADemoPage() {
return (
<main className="flex min-h-screen items-center justify-center bg-background p-6">
<Card className="max-w-lg w-full shadow-md border rounded-2xl">
<CardHeader>
<CardTitle className="text-center text-xl font-semibold">
Google 2-Step Verification Demo
</CardTitle>
</CardHeader>
<CardContent className="flex flex-col items-center gap-4 py-6">
<p className="text-sm text-muted-foreground text-center mb-2">
This is a demonstration of a ShadCN UI dialog component implementing a Google-style 2FA setup flow.
</p>
<Google2FADialog />
</CardContent>
</Card>
</main>
)
}Part of Ruixen UI — browse the full library on 21st.dev.