Login form

A live demo against a mocked server in your browser — the block is the registry's own source.

Install

npx shadcn add @mantle/login-form

Needs a React Aria shadcn project and the @mantle registry in components.json — see Install. The block lands in components/mantle/login-form.tsx, yours to edit.

Usage

Render inside <AuthProvider>.

import { LoginForm } from "@/components/mantle/login-form";

<LoginForm onSuccess={() => navigate("/")} />;

• Built on React Aria Form + TextField with shadcn’s aria Input, so labels, required-field validation, and error messages are announced to assistive technology.
• A 401 NotAuthenticated becomes a form-level alert; a 422 Unprocessable carrying field errors lands on the matching field.
• An error from an OAuth redirect (#error=…) is shown here too.

View the source.