Two-Factor Authentication (2FA) UI – Svelte + Tailwind + vite

Prerequisites

Node.js 16+ npm or yarn

Features

• 6-digit OTP input with auto focus navigation
  • Moves to next box on typing
  • Backspace and Arrow keys navigate correctly
• Validation feedback
  • Shows “Let’s go!” when the entered code is correct
  • Shows “Wrong code!” with a shake animation when incorrect
• Smooth digit drop-in animation (slowed down for better visibility)
• Responsive card design with larger lock icon and card size

Customization

You can customize the component by modifying the tokens.ts object inside the tokens.ts component :

🚀 Getting Started

1. Extract the zip provided

• Go to folder Svelte-2FA
• Run the command in the terminal - npm install, then npm run dev
• open http://localhost:5173/

Project structure

src/ ├── components/ │ ├── TwoFactor.svelte # Main component │ ├── LockStatus.svelte # Lock icon with animations │ ├── OtpBox.svelte # Individual digit input box │ └── ProgressButton.svelte # Animated submit button ├── lib/ │ ├── useOtp.ts # OTP management store │ ├── utils.ts # Utility functions │ └── types.ts # TypeScript definitions └── tokens.ts # Configuration tokens

Demo

Enter digits → boxes auto-advance Backspace/Arrow keys → move focus Correct code → “Let’s go!” button with liquid filling animation from right to left Wrong code → “Wrong code!” with digit boxes and button shake