Components
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.
Loading preview...
// 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://ui.shadcn.com/avatars/01.png' },
{ id: '2', name: 'Jackson Lee', avatarUrl: 'https://ui.shadcn.com/avatars/02.png' },
{ id: '3', name: 'Isabella Nguyen', avatarUrl: 'https://ui.shadcn.com/avatars/03.png' },
{ id: '4', name: 'William Kim', avatarUrl: 'https://ui.shadcn.com/avatars/04.png' },
{ id: '5', name: 'Sofia Davis', avatarUrl: 'https://ui.shadcn.com/avatars/05.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;