Auth Form

A sign-in or sign-up form that reveals fields progressively. It displays error messages and handles form state. Use it to collect user credentials with accessibility in mind.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/auth-form

npx layro-cli add @educlopez/auth-form

npx layro-cli add @educlopez/auth-form

bunx layro-cli add @educlopez/auth-form

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { Check, Eye, EyeOff } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type { FormEvent, ReactNode, RefObject } from "react";
import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
import {
  DURATION_INSTANT,
  SPRING_DEFAULT,
  SPRING_SNAPPY,
} from "@/components/smoothui/lib/animation";