Expandable Profile Card

Renders an animated card that expands to show detailed profile information. Clicking the card opens a larger view with image and content. Use for profile cards that need a smooth, interactive layout.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/expandable-profile-card

npx layro-cli add @watermeloncorp/expandable-profile-card

npx layro-cli add @watermeloncorp/expandable-profile-card

bunx layro-cli add @watermeloncorp/expandable-profile-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';

interface ExpandableCardProps {
  imageSrc?: string;
  title?: string;
  subtitle?: string;
  content?: React.ReactNode;
}

export default function ExpandableProfileCard({
  imageSrc = "https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&q=80&w=1000",
  title = "Jane Doe",
  subtitle = "Senior UX Designer",