Email Client Card

Cards 136

About

Email Client Card A responsive card component for displaying and replying to messages, designed in the style of modern email clients. It features customizable slots for actions, reactions, and a reply input.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Email Client Card to your project and fits it to your theme.

Code

How Email Client Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { EmailClientCard } from '@/components/ui/email-client-card';
import { Send, Trash, Plus } from 'lucide-react';

const EmailClientCardDemo = () => {
  // Sample data to populate the component
  const emailData = {
    avatarSrc: 'https://cdn.21st.dev/assets/mirror/32/32e37319ab6c22cb58c5521232a281ccf2bc8597571d91e1bbc28c254bde159d.jpg',
    avatarFallback: 'SL',
    senderName: 'Samantha Lusan',
    senderEmail: 'samantha@icloud.com',
    timestamp: 'Yesterday, 10:12 am',
    message:
      "Yes, they've introduced new APIs for smoother and more dynamic animations. The enhancements to the core animation framework will make it easier to create more engaging user experiences.",
    reactions: ['😍', '❤️', '🔥', '⚡️', '👍'],
  };

  const handleReaction = (reaction: string) => {
    console.log(`Reacted with: ${reaction}`);
    // Add logic to handle the reaction
  };

  const handleAction = (index: number) => {
    const action = ['Send', 'Delete'][index];
    console.log(`Action clicked: ${action}`);
    // Add logic for actions
  };

  return (
    <div className="flex items-center justify-center h-full w-full p-4 bg-background">
      <EmailClientCard
        avatarSrc={emailData.avatarSrc}
        avatarFallback={emailData.avatarFallback}
        senderName={emailData.senderName}
        senderEmail={emailData.senderEmail}
        timestamp={emailData.timestamp}
        message={emailData.message}
        reactions={emailData.reactions}
        onReactionClick={handleReaction}
        onActionClick={handleAction}
        actions={[
          <Send key="send" className="w-4 h-4" />,
          <Trash key="trash" className="w-4 h-4" />,
        ]}
      />
    </div>
  );
};

export default EmailClientCardDemo;