---
title: "Sign-in card with a referral stub"
description: "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."
plan: Pro
docs: https://ui.edbn.me/docs/templates/sign-in-card-with-referral
---

# Sign-in card with a referral stub

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.

Quillo is an invented writing app in DM Sans with berry and blush tokens. The form holds email and password (with a show button and a Forgot link on the label row), Sign in and a passkey button. Each empty field gets its own error, Enter submits, and the button reads Signing in… while a status line tells screen readers. The stub states the offer and holds the invite link in a read-only field that one click copies. The small notches at each end of the seam are CSS masks on the two halves. The header and footer share the card's width, so the logo and the legal line sit on its edges. It opens with a sample email and password filled in; sample={false} opens it empty. Below 860px the stub sits under the form, with the seam running across.

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/sign-in-card-with-referral
```

## Dependencies
- npm: lucide-react@^1.33.0, @fontsource-variable/dm-sans@^5.3.0
- edbn: edbn-base, button, field, input, input-group, 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