Vercel design examples

Vercel

Signin screen where the user authenticates with GitHub, GitLab, Bitbucket, SAML SSO, or email.

• Sign In

Vercel

Sign-in screen where the user attempted to log in with an email but received an error indicating no account exists, prompting them to sign up instead.

• Error
• Sign Up

Vercel

Signup screen where the user chooses between a personal Hobby plan and a commercial Pro plan before creating their account.

• Sign Up
• Pricing

Vercel

Signup screen where the user selects between Hobby and Pro account types and enters their name to create a Vercel account.

• Sign Up
• Account Setup

Vercel

Verification screen where the user is instructed to check their email for a login link and verify it matches the displayed security code.

• Verification

Vercel

Verification screen confirming a successful user signup and providing a checkbox to opt into product updates.

• Verification
• Success

Vercel

Signup flow transition screen where the user is being redirected to the next step.

• Sign Up
• Loading

Vercel

Creation screen where the user starts a new project by either importing an existing Git repository from GitHub, GitLab, or Bitbucket, or cloning a starter template like Next.js or SvelteKit.

• Add & Create
• Templates

Vercel

Dashboard empty state where the user is prompted to create their first project from a framework template or import a repository.

• Dashboard
• Empty State

Vercel

Project creation step where the user connects a Git repository to deploy a selected Next.js template.

• Add & Create
• Setup Wizard

Vercel

Creation wizard where the user connects a GitHub, GitLab, or Bitbucket repository to deploy a cloned Next.js template.

• Setup Wizard
• Add & Create

Vercel

Wizard step where the user configures a new Git repository to clone and deploy a Next.js template.

• Setup Wizard
• Add & Create