Card

Cards 112

About

Incoming Call Notification This component displays an incoming call notification card. It's designed to be highly reusable, with props for caller information and action handlers. It uses framer-motion for smooth enter/exit animations and a subtle pulsing effect to draw attention.

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

Code

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

Usage.tsx

'use client';

import { useState } from 'react';
import { IncomingCall } from '@/components/ui/card-16'; // Adjust path as needed
import { Button } from '@/components/ui/button';

export default function IncomingCallDemo() {
  const [isReceivingCall, setIsReceivingCall] = useState(false);

  // Handlers to control the component's state
  const handleAccept = () => {
    console.log('Call accepted');
    setIsReceivingCall(false);
  };

  const handleDecline = () => {
    console.log('Call declined');
    setIsReceivingCall(false);
  };

  const handleClose = () => {
    console.log('Notification closed');
    setIsReceivingCall(false);
  };

  return (
    <div className="flex h-[400px] w-full items-center justify-center rounded-md border">
      <Button
        onClick={() => setIsReceivingCall(true)}
        disabled={isReceivingCall}
      >
        Simulate Incoming Call
      </Button>

      <IncomingCall
        isOpen={isReceivingCall}
        callerName="Derry Mustofa"
        callerInfo="Driver"
        statusText="is calling you..."
        avatarUrl="https://cdn.21st.dev/assets/mirror/21/21d021e881d1d1c7387c092e3c0823f851433814e907717eb3373166c9fd8f2b.jpg"
        onAccept={handleAccept}
        onDecline={handleDecline}
        onClose={handleClose}
      />
    </div>
  );
}