Step Card

Installation

Usage

import StepCard from "@/components/ruixen/step-card";
 
export default function App() {
  const handleComplete = (data: {
    email: string;
    password: string;
    otp: string;
  }) => {
    console.log("Form completed:", data);
    // Handle form submission
  };
 
  return <StepCard onComplete={handleComplete} />;
}

Props

Features

• Three-Step Process: Email → Password → 2FA
• Smooth Transitions: Animated step transitions
• Navigation Controls: Back/Next/Submit buttons
• Form Validation: Built-in input validation
• Progress Indication: Clear step titles
• Responsive Design: Works on all screen sizes

Steps

Step 1: Email

• Email input field
• Next button to proceed

Step 2: Password

• Password input field
• Back button to return to email
• Next button to proceed

Step 3: 2FA Code

• OTP input field
• Back button to return to password
• Submit button to complete

Data Structure

The component collects and returns:

{
  email: string;
  password: string;
  otp: string;
}

Animations

Uses Framer Motion for:

• Step transitions: Slide in/out effects
• Button states: Hover and click animations
• Form validation: Error state animations