Sign In

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/signin-form.json

Usage

This block is a complete sign in page ready to use. Just import and render:

Copyimport { SigninForm } from "@/components/blocks/signin-form"
 
export default function SigninPage() {
  return <SigninForm />
}

Features

• Full page layout with centered card
• Logo with link to homepage
• Email field with Mail icon
• Password field with Lock icon and show/hide toggle
• Forgot password link
• Zod validation
• TanStack Form for form state management
• Submit button with spinner
• Sign up link
• Footer with copyright

Customization

• Replace the logo with your own
• Modify the validation schema in signinSchema
• Add fields (like "Remember me" checkbox)
• Integrate with your authentication provider in onSubmit
• Change the links (/, /forgot-password, /sign-up) to match your routing