Invite Card

Cards

About

Invite Card The InviteCard is a UI element designed to encourage users to invite others to a platform or community. It displays the number of remaining invites, shows a list of recently joined members with animated avatars, and provides clear call-to-action buttons for copying an invite link and sharing on social media.

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

Code

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

Usage.tsx

// demo.tsx
import React from 'react';
import { InviteCard } from '@/components/ui/invite-card';

// Sample data for the demo
const sampleUsers = [
  { id: '1', name: 'Olivia Martin', avatarUrl: 'https://cdn.21st.dev/assets/mirror/dc/dcbf9043041b919ea03707a54aaf8bba2954d8ccbff2f9d3413d6a9d832c482c.png' },
  { id: '2', name: 'Jackson Lee', avatarUrl: 'https://cdn.21st.dev/assets/mirror/a8/a81ec3c7852f7d20e541c0083ca6b7ace3e239e925613b6f1d918bf1ba572270.png' },
  { id: '3', name: 'Isabella Nguyen', avatarUrl: 'https://cdn.21st.dev/assets/mirror/31/3115d8bbf2c714425b466397181076633d28d2c4e3a4063708f5fabf070a4c33.png' },
  { id: '4', name: 'William Kim', avatarUrl: 'https://cdn.21st.dev/assets/mirror/13/1324305b052779b3095718bb9718e18a5cfee8c9247adb744d55f45375e0385c.png' },
  { id: '5', name: 'Sofia Davis', avatarUrl: 'https://cdn.21st.dev/assets/mirror/d2/d2962b8be78466d1616281a08f7bfb88e4a81557324c29f97a36b7f017d7576e.png' },
];

const InviteCardDemo = () => {
  // Demo handler functions
  const handleCopy = () => {
    console.log('Invite link copied to clipboard!');
    // In a real app, you might show a toast notification here.
  };
  
  const handleShare = () => {
    console.log('Sharing on LinkedIn...');
    // In a real app, this would open a LinkedIn share dialog.
  };
  
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
      <InviteCard
        title="Invite to Community"
        description={
          <span>
            You have <strong>5 invites</strong> left. Invite more people to get more.
          </span>
        }
        users={sampleUsers}
        totalJoined={13}
        inviteLink="https://your-community.com/invite/a1b2c3d4"
        onCopyLink={handleCopy}
        onShareLinkedIn={handleShare}
      />
    </div>
  );
};

export default InviteCardDemo;