Dashboard

Cards 4

About

Share Dashboard A component for publishing a dashboard and managing team access. It features a scannable QR code, a shareable link, an invitation system, and an overview of team seat usage, all within a single responsive card.

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

Code

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

Usage.tsx

import { ShareDashboard, InvitedUser } from '@/components/ui/dashboard-2'; // Adjust path as needed

// --- MOCK DATA FOR DEMONSTRATION ---
const mockUsers: InvitedUser[] = [
  {
    id: 'user-1',
    name: 'Jack',
    email: 'jack@untitledui.com',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/02/0251acd094671a0b8a2b43fa57169d442989e5eac3845ba4e254d250fafc39b7.jpg',
    status: 'sent',
  },
  {
    id: 'user-2',
    name: 'Sienna',
    email: 'sienna@untitledui.com',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/43/43d95f2384ae1da7afa92d96814b35d48e97402669d7a1d1333cbb5a0a5cbb85.jpg',
    status: 'sent',
  },
  {
    id: 'user-3',
    name: 'Frankie',
    email: 'frankie@untitledui.com',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/be/be9239595e60710214efdbe4a52d6faa2b8986ec8b3140660821d90c1e9f8dc9.jpg',
    status: 'sent',
  },
  {
    id: 'user-4',
    name: 'Matt',
    email: 'matt@untitledui.com',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/9b/9bbbadacfb7548763639a2ea9da7541cd8a9a4af577c12e96928865fcaa19a6c.jpg',
    status: 'sent',
  },
  {
    id: 'user-5',
    name: 'Amélie Laurent',
    email: 'amelie@untitledui.com',
    // Using an external placeholder image service
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/0e/0e070896705960db5025f59cd13d62e3ab4289d8702d084c79e11234b7ee1eab.jpg',
    status: 'accepted',
  },
];

const teamSeatsData = {
  used: 6,
  total: 10,
};

// --- DEMO COMPONENT ---
export default function ShareDashboardDemo() {
  // Placeholder functions to show how props would be used in a real application
  const handleInvite = (email: string) => {
    alert(`✅ Invitation sent to: ${email}\n(In a real app, you'd call your API here.)`);
  };

  const handleCopy = () => {
    navigator.clipboard.writeText('sales.untitledui.com');
    alert('📋 Dashboard URL copied to clipboard!');
  };

  const handleManage = () => {
    alert('⚙️ Navigating to team management page...');
  };
  
  const handleAddDomain = () => {
    alert('🔗 Opening custom domain settings...');
  };

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4 md:p-8">
      <ShareDashboard
        dashboardUrl="sales.untitledui.com"
        qrCodeSrc="https://cdn.21st.dev/assets/mirror/3e/3e2cc9b7c90e06b0f88ec8290055284e8d05d755430b40cbf709bba4ee93750e.png"
        invitedUsers={mockUsers}
        teamSeats={teamSeatsData}
        onInviteUser={handleInvite}
        onCopyUrl={handleCopy}
        onManageTeam={handleManage}
        onAddCustomDomain={handleAddDomain}
      />
    </div>
  );
}