Card

Cards 81

About

Payment Summary Card A visually appealing card to display financial summaries, featuring a main metric, a clickable sub-section, and an avatar stack.

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

import React from 'react';
import { PaymentSummaryCard, Avatar } from '@/components/ui/card-3';

// Sample data for the demo
const sampleAvatars: Avatar[] = [
  { src: 'https://cdn.21st.dev/assets/mirror/f0/f02fed36023656a5b5df6f247c83c96c53bfa9db5b98085cdee93ffc938a5f37.jpg', alt: 'User 1' },
  { src: 'https://cdn.21st.dev/assets/mirror/5b/5b5b2f3487692d40f629010ea6448d150907f780d8c262c4ca194b7386115c2d.jpg', alt: 'User 2' },
  { src: 'https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg', alt: 'User 3' },
];

/**
 * A demo component to showcase the PaymentSummaryCard.
 */
const PaymentSummaryCardDemo = () => {
  const handleCardClick = () => {
    alert('Mandatory payments card clicked!');
  };

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <PaymentSummaryCard
        title="Payment Templates"
        amount={486.32}
        currency="$"
        subCardTitle="Mandatory payments"
        subCardSubtitle="Essential dues"
        avatars={sampleAvatars}
        moreCount={8}
        onSubCardClick={handleCardClick}
      />
    </div>
  );
};

export default PaymentSummaryCardDemo;