React Dialog Block Contact Card

Contact card dialog with avatar, name, contact details, and quick action buttons for email, call, and message

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Connect instantly with one click. This React contact card dialog displays a user's profile with avatar, name, role, and contact information alongside quick action buttons for email, phone, and messaging. Built with shadcn/ui Dialog, Avatar, Button, Badge components and Lucide React icons, users access contact details and initiate communication without leaving context. Clean profile layout, verified badges, and prominent action buttons—perfect for team directories, CRM applications, or any collaborative tool where quick access to contact information improves communication efficiency.

"use client";

import { useState } from "react";
import {
  Mail,
  Phone,
  MessageSquare,
  MapPin,
  BadgeCheck,
} from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

const contactInfo = {
  name: "Sarah Chen",
  role: "Senior Product Designer",
  company: "Acme Inc.",
  avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&auto=format&fit=crop",
  initials: "SC",
  verified: true,
  email: "[email protected]",
  phone: "+1 (555) 123-4567",
  location: "San Francisco, CA",
  timezone: "PST (UTC-8)",
  status: "online",
};

export const title = "React Dialog Block Contact Card";

export default function DialogContactCard() {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="outline">View Contact</Button>
        </DialogTrigger>
      </div>
      <DialogContent className="sm:max-w-sm">
        <DialogTitle className="sr-only">Contact Details</DialogTitle>

        {/* Profile */}
        <div className="flex flex-col items-center text-center pt-2 pb-4">
          <div className="relative">
            <Avatar className="h-20 w-20">
              <AvatarImage src={contactInfo.avatar} alt={contactInfo.name} />
              <AvatarFallback className="text-lg">{contactInfo.initials}</AvatarFallback>
            </Avatar>
            {contactInfo.status === "online" && (
              <span className="absolute bottom-1 right-1 h-3.5 w-3.5 rounded-full bg-green-500 border-2 border-background" />
            )}
          </div>
          <div className="mt-4">
            <div className="flex items-center justify-center gap-1.5">
              <h3 className="font-semibold text-lg">{contactInfo.name}</h3>
              {contactInfo.verified && (
                <BadgeCheck className="h-4 w-4 text-primary" />
              )}
            </div>
            <p className="text-sm text-muted-foreground mt-0.5">
              {contactInfo.role} · {contactInfo.company}
            </p>
          </div>
        </div>

        {/* Contact details */}
        <div className="space-y-2 py-2">
          <div className="flex items-center gap-3 text-sm">
            <Mail className="h-4 w-4 text-muted-foreground" />
            <span>{contactInfo.email}</span>
          </div>
          <div className="flex items-center gap-3 text-sm">
            <Phone className="h-4 w-4 text-muted-foreground" />
            <span>{contactInfo.phone}</span>
          </div>
          <div className="flex items-center gap-3 text-sm">
            <MapPin className="h-4 w-4 text-muted-foreground" />
            <span>{contactInfo.location}</span>
          </div>
        </div>

        {/* Quick actions */}
        <div className="flex gap-2 pt-4">
          <Button className="flex-1" asChild>
            <a href={`mailto:${contactInfo.email}`}>
              <Mail className="mr-2 h-4 w-4" />
              Email
            </a>
          </Button>
          <Button variant="outline" className="flex-1" asChild>
            <a href={`tel:${contactInfo.phone}`}>
              <Phone className="mr-2 h-4 w-4" />
              Call
            </a>
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState } from "react";import {  Mail,  Phone,  MessageSquare,  MapPin,  BadgeCheck,} from "lucide-react";import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";const contactInfo = {  name: "Sarah Chen",  role: "Senior Product Designer",  company: "Acme Inc.",  avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&auto=format&fit=crop",  initials: "SC",  verified: true,  email: "[email protected]",  phone: "+1 (555) 123-4567",  location: "San Francisco, CA",  timezone: "PST (UTC-8)",  status: "online",};export const title = "React Dialog Block Contact Card";export default function DialogContactCard() {  const [open, setOpen] = useState(false);  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">View Contact</Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-sm">        <DialogTitle className="sr-only">Contact Details</DialogTitle>        {/* Profile */}        <div className="flex flex-col items-center text-center pt-2 pb-4">          <div className="relative">            <Avatar className="h-20 w-20">              <AvatarImage src={contactInfo.avatar} alt={contactInfo.name} />              <AvatarFallback className="text-lg">{contactInfo.initials}</AvatarFallback>            </Avatar>            {contactInfo.status === "online" && (              <span className="absolute bottom-1 right-1 h-3.5 w-3.5 rounded-full bg-green-500 border-2 border-background" />            )}          </div>          <div className="mt-4">            <div className="flex items-center justify-center gap-1.5">              <h3 className="font-semibold text-lg">{contactInfo.name}</h3>              {contactInfo.verified && (                <BadgeCheck className="h-4 w-4 text-primary" />              )}            </div>            <p className="text-sm text-muted-foreground mt-0.5">              {contactInfo.role} · {contactInfo.company}            </p>          </div>        </div>        {/* Contact details */}        <div className="space-y-2 py-2">          <div className="flex items-center gap-3 text-sm">            <Mail className="h-4 w-4 text-muted-foreground" />            <span>{contactInfo.email}</span>          </div>          <div className="flex items-center gap-3 text-sm">            <Phone className="h-4 w-4 text-muted-foreground" />            <span>{contactInfo.phone}</span>          </div>          <div className="flex items-center gap-3 text-sm">            <MapPin className="h-4 w-4 text-muted-foreground" />            <span>{contactInfo.location}</span>          </div>        </div>        {/* Quick actions */}        <div className="flex gap-2 pt-4">          <Button className="flex-1" asChild>            <a href={`mailto:${contactInfo.email}`}>              <Mail className="mr-2 h-4 w-4" />              Email            </a>          </Button>          <Button variant="outline" className="flex-1" asChild>            <a href={`tel:${contactInfo.phone}`}>              <Phone className="mr-2 h-4 w-4" />              Call            </a>          </Button>        </div>      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-contact-card.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-contact-card.json

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

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-contact-card.json

Pro block — Sign in to install

React Dialog Block Invite Members

Team member invitation dialog

React Dialog Block Add Writer Profile

Profile form with avatar upload

React Dialog Block Edit Profile Form

Form dialog with input fields

React Dialog Block Share Link

Share dialog with copy link

React Dialog Block Success Confirmation

Success dialog with checkmark

React Dialog Block Schedule Meeting

Meeting scheduler form dialog

Questions you might have

"use client"; import { useState } from "react"; import { Mail, Phone, MessageSquare, MapPin, BadgeCheck, } from "lucide-react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; const contactInfo = { name: "Sarah Chen", role: "Senior Product Designer", company: "Acme Inc.", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&auto=format&fit=crop", initials: "SC", verified: true, email: "[email protected]", phone: "+1 (555) 123-4567", location: "San Francisco, CA", timezone: "PST (UTC-8)", status: "online", }; export const title = "React Dialog Block Contact Card"; export default function DialogContactCard() { const [open, setOpen] = useState(false); return ( <Dialog open={open} onOpenChange={setOpen}> <div className="flex min-h-[350px] items-center justify-center"> <DialogTrigger asChild> <Button variant="outline">View Contact</Button> </DialogTrigger> </div> <DialogContent className="sm:max-w-sm"> <DialogTitle className="sr-only">Contact Details</DialogTitle> {/* Profile */} <div className="flex flex-col items-center text-center pt-2 pb-4"> <div className="relative"> <Avatar className="h-20 w-20"> <AvatarImage src={contactInfo.avatar} alt={contactInfo.name} /> <AvatarFallback className="text-lg">{contactInfo.initials}</AvatarFallback> </Avatar> {contactInfo.status === "online" && ( <span className="absolute bottom-1 right-1 h-3.5 w-3.5 rounded-full bg-green-500 border-2 border-background" /> )} </div> <div className="mt-4"> <div className="flex items-center justify-center gap-1.5"> <h3 className="font-semibold text-lg">{contactInfo.name}</h3> {contactInfo.verified && ( <BadgeCheck className="h-4 w-4 text-primary" /> )} </div> <p className="text-sm text-muted-foreground mt-0.5"> {contactInfo.role} · {contactInfo.company} </p> </div> </div> {/* Contact details */} <div className="space-y-2 py-2"> <div className="flex items-center gap-3 text-sm"> <Mail className="h-4 w-4 text-muted-foreground" /> <span>{contactInfo.email}</span> </div> <div className="flex items-center gap-3 text-sm"> <Phone className="h-4 w-4 text-muted-foreground" /> <span>{contactInfo.phone}</span> </div> <div className="flex items-center gap-3 text-sm"> <MapPin className="h-4 w-4 text-muted-foreground" /> <span>{contactInfo.location}</span> </div> </div> {/* Quick actions */} <div className="flex gap-2 pt-4"> <Button className="flex-1" asChild> <a href={`mailto:${contactInfo.email}`}> <Mail className="mr-2 h-4 w-4" /> Email </a> </Button> <Button variant="outline" className="flex-1" asChild> <a href={`tel:${contactInfo.phone}`}> <Phone className="mr-2 h-4 w-4" /> Call </a> </Button> </div> </DialogContent> </Dialog> ); }

React Dialog Block Contact Card

Installation

Related blocks you will also like

React Dialog Block Invite Members

React Dialog Block Add Writer Profile

React Dialog Block Edit Profile Form

React Dialog Block Share Link

React Dialog Block Success Confirmation

React Dialog Block Schedule Meeting

Questions you might have

What quick actions should contact cards include?

How do I handle contact information privacy?

Should contact cards show availability status?

What does verified badge mean for contacts?

What integrations improve contact cards?

How do contact actions work on mobile?