Project Detail View

Component 408

About

Project Detail View A comprehensive view component designed to display the details of a project or a complex task. It includes sections for status, assignees, dates, tags, description, attachments, and a detailed task list. The component is built to be highly reusable and is styled using shadcn/ui theme variables for seamless light and dark mode support. It incorporates animations with framer-motion for a more dynamic user experience.

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

Code

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

Usage.tsx

import { ProjectDetailView, ProjectDetailViewProps } from "@/components/ui/project-detail-view";

const Demo = () => {
  // Mock data to showcase the component
  const projectData: ProjectDetailViewProps = {
    breadcrumbs: [
      { label: "Client Projects", href: "#" },
      { label: "Website Redesign for Client X", href: "#" },
    ],
    title: "Website Redesign for Client X",
    status: "In Progress",
    assignees: [
      { name: "Achmad Hakim", avatarUrl: "https://cdn.21st.dev/assets/mirror/d3/d34ef3efc6b0394c8619c72468c326f88ef56f849670d7b316c237de61f01a18.jpg" },
      { name: "Samantha Emanuel", avatarUrl: "https://cdn.21st.dev/assets/mirror/cf/cf4721026df31a48d75b05c1f3869cd686c0967b5efa366a41853e7114367a3d.jpg" },
    ],
    dateRange: {
      start: "June 3, 2025",
      end: "June 28, 2025",
    },
    tags: [
        { label: "Design", variant: "destructive" },
        { label: "Client Work", variant: "secondary" },
    ],
    description:
      "This task focuses on preparing a high-impact visual presentation that showcases the new website design concept for Client X. The goal is to clearly communicate the updated UI direction, design system, and user flow improvements to the client in a concise and engaging format.",
    attachments: [
      { name: "ClientX_UI_Redesign.pdf", size: "4.8 Mb", type: "pdf" },
      { name: "Homepage_Mockup.fig", size: "12.4 Mb", type: "figma" },
    ],
    subTasks: [
      {
        id: 1,
        task: "Schedule initial client meeting",
        category: "Discovery",
        status: "Completed",
        dueDate: "June 3, 2025",
      },
      {
        id: 2,
        task: "Gather business goals and user needs",
        category: "Discovery",
        status: "Completed",
        dueDate: "June 4, 2025",
      },
      {
        id: 3,
        task: "Review current website performance",
        category: "Discovery",
        status: "In Progress",
        dueDate: "June 5, 2025",
      },
    ],
  };

  return (
    <div className="flex items-center justify-center p-4 sm:p-8 bg-background">
      <ProjectDetailView {...projectData} />
    </div>
  );
};

export default Demo;