Bollard UI

Sign-up and account creation

Catch address typos before account access is sent.

Pair a typo-aware email field with a pending-aware submit action, then verify ownership server-side before activating the account.

Try the guard rails

A small safety layer for one real flow.

  • Email Input

    Suggests likely provider corrections without changing the address automatically.

    View component

  • Password Policy Input

    Shows password requirements while a person edits the field.

    View component

  • Safe Submit

    Prevents repeated submits while the request is in progress.

    View component

Integration recipe

A starting point for your flow.

import { EmailInput } from "@/components/ui/email-input"
import { SafeSubmit } from "@/components/ui/safe-submit"

<EmailInput label="Work email" value={email} onValueChange={setEmail} />
<SafeSubmit onSubmit={() => createAccountOnServer({ email, password })}>Create account</SafeSubmit>

Server boundary: Email correction and password hints are client-side assistance. Enforce password policy, rate limits, and email verification on the server before enabling the account.

One command for this flow

Install the sign-up pack.

Start with the related components, then edit the copied source in your own product.

npx shadcn@4.21.0 add @bollard/signup-login-pack

Add the Bollard namespace once

Merge this into components.json once. Then run npx shadcn@4.21.0 list to check registry resolution before installing with the short command.

{
  "registries": {
    "@bollard": "https://bollard-ui.vercel.app/r/{name}.json"
  }
}