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

# Sign-in card on a 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.

Tidemill is an invented marine operations brand in Inter Tight. The panel shows a sample day at one harbour: a single tide curve with time ticks and a marker for now, then the day's four high and low waters with the past ones dimmed. The curve passes through every listed time and height; it is hidden from assistive tech, and the times are read out as a list. It opens with sample values and remember me checked; sample={false} opens it empty. Empty or malformed entries get their own errors, the eye button shows the password, and Enter submits. Below 1024px the panel follows the card in one centred column.

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-on-tide-chart
```

## Dependencies
- npm: lucide-react@^1.33.0, @fontsource-variable/inter-tight@^5.3.0
- edbn: edbn-base, button, checkbox, 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