---
title: "Authentication templates"
description: "10 Pro authentication page templates for React. Sign-in, sign-up and account recovery screens."
plan: Pro
docs: https://ui.edbn.me/docs/templates/authentication
---

# Authentication templates

10 Pro authentication page templates for React. Sign-in, sign-up and account recovery screens.

## Installation

Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install any template by name, for example:

```bash
npx shadcn@4.19.0 add @edbn/sign-in-with-error-alert
```

## Templates
- [Sign-in with error alert](https://ui.edbn.me/docs/templates/sign-in-with-error-alert): A sign-in page for a notes app: one white card centred on cool paper, with email and password first, Google and Apple after an "or", and an alert when sign-in fails.
  Install: `npx shadcn@4.19.0 add @edbn/sign-in-with-error-alert`
- [Sign-in card with a referral stub](https://ui.edbn.me/docs/templates/sign-in-card-with-referral): A sign-in page whose card has two parts: a pink referral stub with an invite link to copy, joined along a dashed seam to the white sign-in form.
  Install: `npx shadcn@4.19.0 add @edbn/sign-in-card-with-referral`
- [Sign-in card on a tide chart](https://ui.edbn.me/docs/templates/sign-in-card-on-tide-chart): A sign-in page on deep sea-teal: a white card on the right offers a passkey or single sign-on, then email and password, beside a panel with today's tide curve and the day's high and low waters.
  Install: `npx shadcn@4.19.0 add @edbn/sign-in-card-on-tide-chart`
- [Split sign-in with logo wall](https://ui.edbn.me/docs/templates/split-sign-in-with-logo-wall): A split sign-in page: a graphite panel with a customer quote and a 2×2 wall of customer wordmarks, beside a white form with Google, email and password, and a saffron button.
  Install: `npx shadcn@4.19.0 add @edbn/split-sign-in-with-logo-wall`
- [Dark sign-in with a saved account](https://ui.edbn.me/docs/templates/dark-sign-in-with-saved-account): A dark sign-in page in one centred column: the account this browser remembers as a single row to continue with, then an email-or-username and password form.
  Install: `npx shadcn@4.19.0 add @edbn/dark-sign-in-with-saved-account`
- [Sign-in card beside an offer](https://ui.edbn.me/docs/templates/sign-in-card-beside-an-offer): A sign-in page on a saffron field: a white card with email, password and Google on the left, and a plain offer on the right with a short sample statement of what three trips earned back.
  Install: `npx shadcn@4.19.0 add @edbn/sign-in-card-beside-an-offer`
- [Free trial start with app preview](https://ui.edbn.me/docs/templates/trial-start-with-app-preview): A trial sign-up page split in two: the form in a narrow column on the left, and a screenshot of the app's week calendar on a deeper panel to the right, running off the page's right and bottom edges.
  Install: `npx shadcn@4.19.0 add @edbn/trial-start-with-app-preview`
- [Google sign-in with a habit week](https://ui.edbn.me/docs/templates/google-sign-in-with-habit-week): A one-button sign-in page on warm paper: one calm column with the heading, a Google button, a note on what the calendar access covers and the terms, above a small week of habits.
  Install: `npx shadcn@4.19.0 add @edbn/google-sign-in-with-habit-week`
- [Phone sign-in beside a QR pane](https://ui.edbn.me/docs/templates/phone-sign-in-with-qr): A split sign-in page: a petrol pane with a QR code and three steps on the left, and a phone or email form on the right, both set on one shared row grid.
  Install: `npx shadcn@4.19.0 add @edbn/phone-sign-in-with-qr`
- [Sign-in with announcement panel](https://ui.edbn.me/docs/templates/sign-in-with-announcement): A log-in page with the form on the left and, on the right, an inset plum panel announcing a new feature, with a small glimpse of it in use.
  Install: `npx shadcn@4.19.0 add @edbn/sign-in-with-announcement`

All templates: https://ui.edbn.me/docs/templates · https://ui.edbn.me/docs/templates.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt