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.
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>
);
}