1

Testimonial

The split sign in page with a customer quote over the photo: a soft scrim keeps the quote and author readable in both themes.

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
quote
ReactNode

Quote set over the photo.

author
{ name: string; role: string; avatarSrc?: string }

Who said it. Without avatarSrc the avatar shows initials.

imageSrc
string

Photo on the end side from the large breakpoint. Without it the panel is a quiet surface.

imageAlt
string

Alt text of the photo. Defaults to empty, since the photo is decorative.

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-quote.json

How to use

<LoginQuote
  imageSrc="/images/login.jpg"
  quote="Setup took one afternoon."
  author={{ name: 'Ada Park', role: 'CTO' }}
/>

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
N

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-quote.json