Ballmac UI home
Get Pro

Auth Pro 1: sign in with email and providersPRO

A calm sign-in card with provider buttons, email and password with a show button, remember me, field errors that take focus and a server error banner.

Installation

  1. Once per project: add the Pro registry and your licence key.

    components.json
    {
  "registries": {
    "@ballmac": "https://ui.ballmac.com/r/{name}.json",
    "@ballmac-pro": {
      "url": "https://ui.ballmac.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${BALLMAC_LICENSE_KEY}" }
    }
  }
}
    .env.local
    BALLMAC_LICENSE_KEY=your-licence-key

  2. Add it.

    $ pnpm dlx shadcn@latest add @ballmac-pro/auth-pro-1

  3. Need a licence or help with setup?

    The source is part of Ballmac UI Pro.

    Log in with your licence key to read and copy it here, or install it through the shadcn CLI or the MCP server. You own the code once it is in your project.

    Get ProLog in

Usage

import { AuthPro1 } from "@/components/ballmac/blocks/auth-pro-1/auth-pro-1"

Dependencies

npm
lucide-react
Registry
@ballmac/button@ballmac/checkbox@ballmac/inputshadcn/utils

Use with AI

Sign-in form. Validates on submit, focuses the first error and shows an Error message from your handler. Credentials are never stored by the block. With the shadcn MCP server set up (guide), ask your agent:

Add the Ballmac UI Auth Pro 1: sign in with email and providers (@ballmac-pro/auth-pro-1) to this project with the shadcn MCP, then use it where it fits.

Use it for

  • Sign-in pages

Not for

  • Passwordless-only products (use auth-pro-4)

Registry JSON (needs your licence key): https://ui.ballmac.com/r/pro/auth-pro-1.json

Covered by the Ballmac UI Pro license.

More authentication blocks

Forgot Password 1: request, resend and reset

The whole password-recovery flow in one card: request a link, check-your-email with a resend countdown, choose a new password with confirmation and strength, and a success screen. Focus moves to each new heading.

Login 1: card with SSO and magic link

Centered sign-in card: SSO and email-link buttons, an email and password form with remember me, a loading submit and an inline error.

Login 2: split screen with testimonial

A split-screen sign-in: SSO and passkey buttons, validated email and password with show/hide, remember me and error state on one side, a soft colour mesh with a customer quote on the other.

Signup 1: form with benefits column

A signup page: validated name, work email and password with a live strength guide, terms checkbox, SSO option and a check-your-inbox confirmation, beside a benefits list with social proof.