Application UI · Sign-in and Registration

Sign In Form

A centered authentication form for user sign-in.

What's in it

Sign In Heading: Sign in to your account
Sign In Form: Email and password login form. (Email Field, Password Field, Submit Button)

The brief your agent gets

This is how the section appears in a UIPrompt brief: each component with its prompt, position and role, so your agent builds the section as planned instead of guessing. In a project, the brief also carries your exact copy, your brand and your stack.

# Sign In Form [order: 0]

- **Sign In Section** [x: 0, y: 0, order: 0]
  - **Prompt:** A centered authentication form for user sign-in.
  - **Sign In Heading** [x: 40, y: 40, order: 0]
    - **Prompt:** Sign in to your account
  - **Sign In Form** [x: 40, y: 112, order: 1]
    - **Prompt:** Email and password login form.
    - **Email Field** [x: 0, y: 0, order: 0]
      - **Prompt:** Email address input with label.
    - **Password Field** [x: 0, y: 96, order: 1]
      - **Prompt:** Password input with label.
    - **Submit Button** [x: 0, y: 192, order: 2]
      - **Type:** primary
      - **Prompt:** Sign In

Get the prompt for your stack

The same section written for a specific stack, with each component mapped to its framework and component library.

Next.js + Tailwind CSS + shadcn/ui React + Tailwind CSS Vue 3 + Tailwind CSS SvelteKit + Tailwind CSS Astro + Tailwind CSS Next.js + Material UI

Use it in three steps

Open the editor and drag Sign In Form from the section library onto a page. It lines up with the other sections on a 12-column grid.
Double-click a component to add your own copy. Your agent uses it word for word.
Your agent builds the page from the brief, over the UIPrompt connector or from a pull request to your repo. It works with Claude Code, Codex, Cursor, GitHub Copilot, Windsurf and Gemini CLI.

More sections