Claim Deployment

Source CodeExample UsagePreview

Your Deployment is Ready

Claim it to manage it from your own account and make future updates.

Claim Deployment

Overview

The Claim Deployment block provides a polished interface for platforms that deploy sites to Vercel on behalf of their users. When you create a deployment programmatically (e.g., through Mintlify, Hashnode, or similar platforms), users can claim ownership to manage updates and settings directly from their own Vercel account.

Installation

npx @vercel/platforms@latest add claim-deployment

Features

• Visual deployment preview: Shows a preview image of the deployed site
• One-click URL copying: Users can easily copy their deployment URL with the external link button
• Vercel branding: Includes the official Vercel logo for authenticity
• Responsive design: Works seamlessly across desktop and mobile devices

Usage

import { ClaimDeployment } from '@/components/blocks/claim-deployment'

export default function DeploymentReady() {
  const handleClaim = () => {
    // Redirect to Vercel OAuth flow or handle claim logic
    window.location.href = `https://vercel.com/oauth/authorize?...`
  }

  return (
    <ClaimDeployment
      url="https://my-app.vercel.app"
      onClaimClick={handleClaim}
    />
  )
}

Props

Customization

The component uses shadcn/ui components internally, allowing you to customize the appearance through your existing theme configuration. The preview image placeholder (https://placehold.co/1440x700) should be replaced with an actual screenshot of the deployment.

Integration Flow

1. Deploy via API: Your platform creates a deployment using Vercel's API
2. Show claim interface: Present this component to the user with their deployment URL
3. Handle claim action: When clicked, redirect to Vercel's OAuth flow or your custom claim process
4. Transfer ownership: Complete the transfer so users can manage the deployment from their Vercel dashboard