---
title: "Free trial start with app preview"
description: "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."
plan: Pro
docs: https://ui.edbn.me/docs/templates/trial-start-with-app-preview
---

# Free 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.

Clayhour is an invented booking app for craft studios, set in DM Sans with fired clay on cream. The logo, the form and the log-in link share one left edge in a 360px column; the screenshot is a week of classes drawn in HTML, with full classes in a deeper clay tint. It is decoration, inert and hidden from assistive tech. Google and Microsoft come first, then a work-email field below an "or" rule. An empty or malformed address gets its own error; Enter submits, onEmail receives the address and a status line confirms. It opens with a sample work email; sample={false} opens it empty. Below 1024px the screenshot panel hides and the column centres in the window.

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/trial-start-with-app-preview
```

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