Login Page Templates for React

A login page template is a ready made sign in screen: the layout, the form and its states, which you connect to your own authentication. The layout is the easy half. The work is in the states a screen mock never shows: what happens while the request is running, what a wrong password looks like, where focus goes after an error and what a screen reader hears.

Every login page here ships those states built in. Fields validate on submit and then clear their errors as you type, buttons show a spinner while a request runs and then a tick or a confirmation screen, failures appear in plain words above the button, and the inputs carry the autocomplete values that let password managers fill them. You pass one function for the email form, whether it checks a password or sends a magic link, and one for social sign in, and the template handles the rest.

They are written in React with Tailwind CSS and follow your light and dark theme through the dark class, so the sign in screen matches the product it opens. Each one is a whole page rather than a form dropped into a modal, meant for the route your Sign in or Create account button points at.