Sign in

Email and password with a forgot link, optional social buttons, inline field errors, and a loading button that keeps its size.

A

Welcome back

Sign in to your account.

No account yet? Sign up

page.tsx

import { AuthSignIn } from "@/components/blocks/auth-sign-in";

export default function Page() {
  return <AuthSignIn onSubmit={signIn} forgotHref="/forgot" signUpHref="/signup" />;
}

"use client";

import { type FormEvent, type ReactNode, useState } from "react";
import {
  FormCard,
  FormMessage,
  OrDivider,
  SocialButtons,
  type SocialProvider,
  SubmitButton,
  TextField,
} from "@/components/registry/form-kit";

108 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/auth-sign-in

Sign up

Name, email and password with a length count as you type, and links to sign in and the terms.

A

Create your account

It takes less than a minute.

Already have an account? Sign in

page.tsx

import { AuthSignUp } from "@/components/blocks/auth-sign-up";

export default function Page() {
  return <AuthSignUp onSubmit={createAccount} signInHref="/login" />;
}

"use client";

import { type FormEvent, type ReactNode, useState } from "react";
import {
  FormCard,
  FormMessage,
  OrDivider,
  SocialButtons,
  type SocialProvider,
  SubmitButton,
  TextField,
} from "@/components/registry/form-kit";

123 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/auth-sign-up

Verify code

A one time code in separate boxes that accepts a paste, moves on as you type, sends when full, and counts down to resend.

A

Check your email

We sent a 6 digit code to ada@acme.com.

Resend the code in 30s

Demo code 123456

page.tsx

import { AuthVerify } from "@/components/blocks/auth-verify";

export default function Page() {
  return <AuthVerify email="ada@acme.com" onVerify={verifyCode} onResend={resendCode} />;
}

"use client";

import { type ClipboardEvent, type FormEvent, type KeyboardEvent, type ReactNode, useEffect, useRef, useState } from "react";
import { FormCard, FormMessage, SubmitButton } from "@/components/registry/form-kit";
import { cn } from "@/lib/utils";

export interface AuthVerifyProps {
  mark?: ReactNode;
  /** Where the code was sent, shown in the description. */
  email: string;
  length?: number;
  /** Resolve when the code is right; throw an Error and its message shows above the boxes. */

127 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/auth-verify

Forgot password

A reset request that turns into a check your inbox note in the same card, gliding between the two.

A

Reset your password

Enter your email and we will send you a link to set a new one.

Back to sign in

page.tsx

import { AuthForgot } from "@/components/blocks/auth-forgot";

export default function Page() {
  return <AuthForgot onSubmit={sendResetLink} signInHref="/login" />;
}

"use client";

import { MailCheck } from "lucide-react";
import { type FormEvent, type ReactNode, useState } from "react";
import { Collapse, FormCard, FormMessage, SubmitButton, TextField } from "@/components/registry/form-kit";
import { cn } from "@/lib/utils";

export interface AuthForgotProps {
  mark?: ReactNode;
  /** Resolve once the reset email is sent; throw an Error and its message shows above the form. */
  onSubmit?: (email: string) => Promise<void> | void;
  signInHref?: string;

87 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/auth-forgot