Contact card

Not just a simple Contact button: an inline link that opens a card with an avatar, email to copy, LinkedIn and Book a call.

Cards, hover, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/contact-card.tsx https://motion-brew.com/r/contact-card.tsx

One self contained file for React and Tailwind CSS: contact-card.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { ContactCard } from "@/components/contact-card";

export default function Page() {
  return (
    <p className="text-[28px] font-semibold leading-[1.3] tracking-[-0.025em]">
      Not just a simple{" "}
      <ContactCard
        name="Maya Lindqvist"
        role="Design lead"
        avatar="/team/maya.jpg"
        email="maya@studio.co"
        linkedin="https://www.linkedin.com/in/maya"
        bookHref="https://cal.com/maya"
      />{" "}
      button.
    </p>
  );
}

Props

Prop	Type	Default	Description
label	string	"Contact"	Pill label
name	string	"Maya Lindqvist"	Who you are reaching
role	string	"Design lead"	Their role
avatar	string	a photo	Their photo
email	string	"maya@studio.co"	Email address, copied on press
linkedin	string	linkedin.com	LinkedIn profile URL
bookHref	string		Booking link; without it the button calls onBook
onBook	() => void		Called by the book button when there is no bookHref
bookLabel	string	"Book a call"	Book button label
available	boolean	true	Show the available dot
className	string		Placement of the pill

More cards

Decay card: A 3D tilting image card with text over it that rots away from the inside when you hover, until a second picture takes the whole card, then grows back.
Liquid metal card: Hover and black liquid metal pours in from the nearest corner, beaded rivulets running ahead, until a second picture surfaces from inside it.
Reaction card: A post with three reaction buttons.
Event card: Minimal event details with a clock that sweeps to the start time, a guest stack that fans out, and round GSAP-drawn tools beside a Join button.

All animated react card components