Login

Pantalla de inicio de sesión con glassmorphism — borde degradado, backdrop blur y validación custom con burbujas. Sin fondo propio: el padre controla el contexto visual.

pnpm dlx nuvo-ui add login

Preview

Bienvenido de nuevo

Ingresa tus credenciales para continuar

¿No tienes cuenta? Crear cuenta

Prueba: deja un campo vacío para ver la burbuja de validación. Ingresa contraseña menor a 6 caracteres para ver el error del servidor.

Uso en página completa

// page.tsx — envuelve en h-screen para ocupar toda la pantalla
import { Login } from "@nuvo-ui/ui"

export default function LoginPage() {
  return (
    <div className="h-screen">
      <Login
        onSubmit={async ({ email, password }) => {
          await signIn(email, password)
        }}
      />
    </div>
  )
}

Con estado de error

const [error, setError] = useState<string | undefined>()

<Login
  error={error}
  onSubmit={async ({ email, password }) => {
    try {
      await signIn(email, password)
    } catch {
      setError("Credenciales incorrectas. Inténtalo de nuevo.")
    }
  }}
/>

Con estado de carga

const [loading, setLoading] = useState(false)

<Login
  loading={loading}
  onSubmit={async (values) => {
    setLoading(true)
    await signIn(values.email, values.password)
    setLoading(false)
  }}
/>

Props

Prop	Tipo	Default	Descripción
onSubmit	(values: { email: string; password: string }) => void \| Promise<void>	—	Callback al enviar el formulario
loading	boolean	false	Muestra spinner y deshabilita el formulario
error	string	—	Mensaje de error visible sobre el formulario
title	string	"Bienvenido de nuevo"	Título de la tarjeta
subtitle	string	"Ingresa tus credenciales…"	Subtítulo descriptivo
logo	ReactNode	—	Nodo opcional mostrado encima del título
className	string	—	Clases extra en el contenedor raíz