React Dialog Block Guest Checkout

Guest checkout dialog with email capture, account benefits preview, and continue options for React ecommerce

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Convert guests to customers with smart checkout options. This React guest checkout dialog lets users proceed without an account while showcasing registration benefits, capturing email for order updates, and offering quick social signup. Built with shadcn/ui Dialog, Button, and Input components using Tailwind CSS, stores reduce cart abandonment while building customer relationships. Enter email, see benefits, checkout faster—perfect for Shopify headless stores, ecommerce platforms, marketplace checkouts, or any Next.js application where frictionless purchasing increases conversion rates.

"use client";

import { useState } from "react";
import { ShoppingBag, ArrowRight, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";

const benefits = ["Order tracking", "Faster checkout", "Exclusive offers"];

export const title = "React Dialog Block Guest Checkout";

export default function DialogGuestCheckout() {
  const [open, setOpen] = useState(false);
  const [email, setEmail] = useState("");

  const handleContinue = () => {
    setOpen(false);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="outline">
            <ShoppingBag className="mr-2 h-4 w-4" />
            Checkout
          </Button>
        </DialogTrigger>
      </div>
      <DialogContent style={{ maxWidth: "384px" }}>
        <DialogHeader>
          <DialogTitle>Checkout</DialogTitle>
          <DialogDescription>
            Continue as guest or sign in
          </DialogDescription>
        </DialogHeader>

        <div className="py-4 space-y-4">
          {/* Guest checkout */}
          <div className="space-y-3">
            <Label htmlFor="email" className="text-sm">
              Email for order updates
            </Label>
            <Input
              id="email"
              type="email"
              placeholder="[email protected]"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <Button
              className="w-full"
              onClick={handleContinue}
              disabled={!email}
            >
              Continue as Guest
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>

          <div className="relative">
            <Separator />
            <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-2 text-xs text-muted-foreground">
              or
            </span>
          </div>

          {/* Sign in option */}
          <div className="space-y-3">
            <Button variant="outline" className="w-full">
              Sign In
            </Button>
            <div className="text-center">
              <p className="text-xs text-muted-foreground mb-2">
                Create account for:
              </p>
              <div className="flex justify-center gap-4">
                {benefits.map((benefit) => (
                  <div
                    key={benefit}
                    className="flex items-center gap-1 text-xs text-muted-foreground"
                  >
                    <Check className="h-3 w-3" />
                    {benefit}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState } from "react";import { ShoppingBag, ArrowRight, Check } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Input } from "@/components/ui/input";import { Label } from "@/components/ui/label";import { Separator } from "@/components/ui/separator";const benefits = ["Order tracking", "Faster checkout", "Exclusive offers"];export const title = "React Dialog Block Guest Checkout";export default function DialogGuestCheckout() {  const [open, setOpen] = useState(false);  const [email, setEmail] = useState("");  const handleContinue = () => {    setOpen(false);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <ShoppingBag className="mr-2 h-4 w-4" />            Checkout          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "384px" }}>        <DialogHeader>          <DialogTitle>Checkout</DialogTitle>          <DialogDescription>            Continue as guest or sign in          </DialogDescription>        </DialogHeader>        <div className="py-4 space-y-4">          {/* Guest checkout */}          <div className="space-y-3">            <Label htmlFor="email" className="text-sm">              Email for order updates            </Label>            <Input              id="email"              type="email"              placeholder="[email protected]"              value={email}              onChange={(e) => setEmail(e.target.value)}            />            <Button              className="w-full"              onClick={handleContinue}              disabled={!email}            >              Continue as Guest              <ArrowRight className="ml-2 h-4 w-4" />            </Button>          </div>          <div className="relative">            <Separator />            <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-2 text-xs text-muted-foreground">              or            </span>          </div>          {/* Sign in option */}          <div className="space-y-3">            <Button variant="outline" className="w-full">              Sign In            </Button>            <div className="text-center">              <p className="text-xs text-muted-foreground mb-2">                Create account for:              </p>              <div className="flex justify-center gap-4">                {benefits.map((benefit) => (                  <div                    key={benefit}                    className="flex items-center gap-1 text-xs text-muted-foreground"                  >                    <Check className="h-3 w-3" />                    {benefit}                  </div>                ))}              </div>            </div>          </div>        </div>      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-guest-checkout.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-guest-checkout.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-guest-checkout.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-guest-checkout.json

Pro block — Sign in to install

React Dialog Block Login

User login

React Dialog Block Register

Account creation

React Dialog Block Email Verification

Email confirm

React Dialog Block Add To Cart

Cart actions

React Dialog Block Payment Method

Payment selection

React Dialog Block Shipping Options

Delivery choice

Questions you might have

"use client"; import { useState } from "react"; import { ShoppingBag, ArrowRight, Check } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Separator } from "@/components/ui/separator"; const benefits = ["Order tracking", "Faster checkout", "Exclusive offers"]; export const title = "React Dialog Block Guest Checkout"; export default function DialogGuestCheckout() { const [open, setOpen] = useState(false); const [email, setEmail] = useState(""); const handleContinue = () => { setOpen(false); }; return ( <Dialog open={open} onOpenChange={setOpen}> <div className="flex min-h-[350px] items-center justify-center"> <DialogTrigger asChild> <Button variant="outline"> <ShoppingBag className="mr-2 h-4 w-4" /> Checkout </Button> </DialogTrigger> </div> <DialogContent style={{ maxWidth: "384px" }}> <DialogHeader> <DialogTitle>Checkout</DialogTitle> <DialogDescription> Continue as guest or sign in </DialogDescription> </DialogHeader> <div className="py-4 space-y-4"> {/* Guest checkout */} <div className="space-y-3"> <Label htmlFor="email" className="text-sm"> Email for order updates </Label> <Input id="email" type="email" placeholder="[email protected]" value={email} onChange={(e) => setEmail(e.target.value)} /> <Button className="w-full" onClick={handleContinue} disabled={!email} > Continue as Guest <ArrowRight className="ml-2 h-4 w-4" /> </Button> </div> <div className="relative"> <Separator /> <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-2 text-xs text-muted-foreground"> or </span> </div> {/* Sign in option */} <div className="space-y-3"> <Button variant="outline" className="w-full"> Sign In </Button> <div className="text-center"> <p className="text-xs text-muted-foreground mb-2"> Create account for: </p> <div className="flex justify-center gap-4"> {benefits.map((benefit) => ( <div key={benefit} className="flex items-center gap-1 text-xs text-muted-foreground" > <Check className="h-3 w-3" /> {benefit} </div> ))} </div> </div> </div> </div> </DialogContent> </Dialog> ); }

React Dialog Block Guest Checkout

Installation

Related blocks you will also like

React Dialog Block Login

React Dialog Block Register

React Dialog Block Email Verification

React Dialog Block Add To Cart

React Dialog Block Payment Method

React Dialog Block Shipping Options

Questions you might have

How do I convert guests to accounts?

Why capture email for guest checkout?

What account benefits should I show?

Should I offer social login?

How do I reduce abandonment here?

How do I handle returning guests?