1

Email first

A centered sign in page that leads with the email and password form, with Google and Apple side by side under the divider.

Dependencies

@hugeicons/react@hugeicons/core-free-icons

Interaction Type

Every field has a visible label and the right autocomplete, so password managers fill it. The password toggle is a 44px button with aria-pressed and a label for each state; its eye icons crossfade instead of cutting. Errors set aria-invalid and are announced as an alert. All controls are 44px tall with the accent focus ring.

Props

Options you can pass to customize this component.

Prop
Type
Description
title
ReactNode

Page heading. Defaults to "Welcome back".

description
ReactNode

Line under the heading.

onSubmit
(values: { email: string; password: string }) => void

Called with the email and password when the form is submitted.

onProvider
(providerId: string) => void

Called with the provider id when a sign in button is pressed.

providers
{ id: string; label: string; icon: ReactNode }[]

Sign in providers. Defaults to Google and Apple. Pass [] to hide them.

error
ReactNode

Error under the fields. Sets aria-invalid on both inputs, links them with aria-describedby and is announced as an alert.

forgotHref
string

Where the forgot password link points.

signupHref
string

Where the create account link points.

emailLabel, passwordLabel, submitLabel
string

Visible labels, all overridable for localization.

showPasswordLabel, hidePasswordLabel
string

Accessible names of the password toggle in each state.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/login-email.json

How to use

<LoginEmail onSubmit={({ email, password }) => signIn(email, password)} />

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
acme.app/login

Welcome back

Sign in to keep building with Nexvyn UI.

Forgot password?

New to Nexvyn UI? Create an account

npx shadcn@latest addhttps://ui.nexvyn.dev/r/login-email.json