Project Management Dashboard

Cards 259

About

A modern, Tailwind-powered React component for building a project management dashboard with full customization through props plus extensive events to hook into when setting up your backend API. Includes fallbacks when event handlers are not provided, simple inline forms for editing project details, drag and drop support for reordering projects (must be in list mode with filter set to manual), side panel nav bar, functional project search, functional project filtering and ordering, side panel for client messaging with message favoriting system, local storage persistence for UI state, per project branding with accentColor and bgColor class, accessibility features like keyboard navigation, aria live announcements for drag and drop reordering, and control labels plus optional list virtualization for long project lists. Provide initial projects and messages via optional props or connect to your backend to update projects in real time vie event handlers. Enjoy the single best, most fully featured Project Management Dashboard component available here on 21st.dev, oh and it is dependency free.

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

Code

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

Usage.tsx

import React, { useState } from "react";
import ProjectDashboard, { Project, Message } from "@/components/ui/project-management-dashboard";


const initialProjects: Project[] = [
  {
    id: "p1",
    name: "Web Designing",
    subtitle: "Prototyping",
    date: "2025-07-10",
    progress: 60,
    status: "inProgress",
    accentColor: "#f59e0b",
    participants: [
      "https://cdn.21st.dev/assets/mirror/ea/ea56b2fc42a4007ad0c8bb6f353e8da70503dd3b201ceecc1efa53af9ce6ade9.jpg",
      "https://cdn.21st.dev/assets/mirror/d6/d684d78c1dbd92991b27aa1191a3480143106b567bb1bb88aa6082c1d38f3e41.jpg",
    ],
    daysLeft: 2,
    bgColorClass: "bg-amber-50 dark:bg-amber-900/20",
  },
  {
    id: "p2",
    name: "Testing",
    subtitle: "QA Pass",
    date: "2025-06-15",
    progress: 50,
    status: "upcoming",
    accentColor: "#6366f1",
    participants: [
      "https://cdn.21st.dev/assets/mirror/38/38a707701a341ce7752c4ba27fb589760c9ffad346b0ab36639dd788570595d7.jpg",
      "https://cdn.21st.dev/assets/mirror/dc/dcb1066acc781357a985f83d9ca77725f08f3c6c0cc575dbc7904a507a7ae715.jpg",
    ],
    daysLeft: "Due Friday",
    bgColorClass: "bg-indigo-50 dark:bg-indigo-900/20",
  },
  {
    id: "p3",
    name: "Brand Refresh",
    subtitle: "Design System",
    date: "2025-03-02",
    progress: 100,
    status: "completed",
    accentColor: "#10b981",
    participants: [
      "https://cdn.21st.dev/assets/mirror/cf/cfa3266f8cd76eeaca6bd059795f398d67fad9dca8f885c9cfd3b28f61031ca5.jpg",
    ],
    daysLeft: 0,
    bgColorClass: "bg-emerald-50 dark:bg-emerald-900/20",
  },
];

const demoMessages: Message[] = [
  {
    id: "m1",
    name: "Stephanie",
    avatarUrl:
      "https://cdn.21st.dev/assets/mirror/13/13de19270a40af7066b275c276347f7169bd6fdead3ce75b3cc0458619f89fe1.jpg",
    text: "Got your first assignment—looks great. Ready for the next.",
    date: "Aug 20",
    starred: true,
  },
  {
    id: "m2",
    name: "Mark",
    avatarUrl:
      "https://cdn.21st.dev/assets/mirror/46/4693c4e0f14d3343aa2342ba91d52b3aec85f6bee3cf48cc13a2e616e9bdbd1c.jpg",
    text: "How’s the progress? Still waiting on your response.",
    date: "Aug 21",
  },
];


export default function DemoOne() {
  const [data, setData] = useState<Project[]>(initialProjects);

  return (
    <div className="min-h-dvh bg-slate-50 dark:bg-slate-900">
      <ProjectDashboard
        title="Project Management"
        user={{ name: "Alex", avatarUrl: "https://cdn.21st.dev/assets/mirror/cc/cc39a907b13e3ed9f338da9d7ed985467345d8b1b87d5fb03621593c7d67abb7.jpg" }}
        projects={data}
        messages={demoMessages}
        // Persist UI choices under this key
        persistKey="demo-01"
        // Handle updates and reordering (controlled)
        onProjectUpdate={(proj) => {
          setData((arr) => arr.map((p) => (p.id === proj.id ? proj : p)));
        }}
        onProjectsReorder={(ids) => {
          setData((arr) => {
            const map = new Map(arr.map((p) => [p.id, p]));
            return ids.map((id) => map.get(id)!).filter(Boolean);
          });
        }}
        // Try list virtualization for large sets
        virtualizeList={true}
        estimatedRowHeight={150}
        // Observe actions
        onProjectAction={(id, a) => console.log("action:", a, id)}
        onProjectClick={(id) => console.log("open:", id)}
        onMessageStarChange={(id, s) => console.log("star:", id, s)}
      />
    </div>
  );
}