Shared Files

Cards 22

About

Shared Files Panel Streamlined interface to manage and track file-sharing with contacts. Perfect for collaboration tools to keep shared access transparent and organized.

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

Code

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

Usage.tsx

// demo.tsx
import { SharedFileCard, User } from '@/components/ui/shared-files';

// Mock data for demonstration purposes
const mockUsers: User[] = [
  {
    id: '1',
    name: 'Simon Hempe',
    email: 'no.simon@gmail.com',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/42/420c64d5e90b2ff05fc182e3d8c3df40076440cb684d927efed247855775ea9b.jpg',
    fallback: 'SH',
  },
  {
    id: '2',
    name: 'Alberta Kimber',
    email: 'realAlberta@gmail.com',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/ff/ff4b0fe2f7d11aff0d68f760e5fdcfeebf8b884c024ae24c9a6cf1d2edf76f49.jpg',
    fallback: 'AK',
  },
  {
    id: '3',
    name: 'Sigit Nurochman',
    email: 'Rochman31@gmail.com',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/a3/a37358a09c532474e3246a94e5e5104b1b6b6907f83b44259509f8c776506120.jpg',
    fallback: 'SN',
  },
];

const fileUrl = 'odama.io/landing-page';

export default function SharedFileCardDemo() {
  const handleSeeAll = () => {
    alert('"See All" clicked!');
  };

  const handleUserClick = (userId: string) => {
    const user = mockUsers.find((u) => u.id === userId);
    alert(`Clicked on user: ${user?.name}`);
  };

  return (
    <div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
      <SharedFileCard
        title="Shared File"
        users={mockUsers}
        fileUrl={fileUrl}
        onSeeAllClick={handleSeeAll}
        onUserClick={handleUserClick}
      />
    </div>
  );
}