---
title: "Phone sign-in beside a QR pane"
description: "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."
plan: Pro
docs: https://ui.edbn.me/docs/templates/phone-sign-in-with-qr
---

# Phone sign-in beside a QR pane

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.

Halden is an invented brand in Instrument Sans with petrol and mint tokens. A segmented control switches between a phone number (with a country code select) and an email. Continue checks the entry, shows the error under the field, and says there when the code or link is on its way. Both halves share one grid: the wordmark and the sign-up link sit on one line, the QR code and the heading start on one line, and the pane's note and the footer end on one. New code draws a fresh pattern; the pattern is a placeholder that encodes nothing. It opens with a sample phone number; sample={false} opens it empty. Below 960px the QR pane drops away and the form takes the page.

A Pro page template built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. 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:

```bash
npx shadcn@4.19.0 add @edbn/phone-sign-in-with-qr
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, button, field, input, native-select, tabs, text-link

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More authentication templates

All 10, with install commands: https://ui.edbn.me/docs/templates/authentication · https://ui.edbn.me/docs/templates/authentication.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