Project Ticket Card

Cards 2

About

Project Ticket Card This component displays detailed information about a project task or ticket. It's structured using shadcn's Card and Tabs components and is animated with framer-motion for a polished feel.

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

Code

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

Usage.tsx

import * as React from "react";
import { ProjectTicketCard } from "@/components/ui/project-ticket-card"; // Adjust the import path as needed

// Mock data for the demo
const mockProjectManager = {
  name: "Miguel Lorenzo",
  avatarUrl: "https://cdn.21st.dev/assets/mirror/ff/ff4b0fe2f7d11aff0d68f760e5fdcfeebf8b884c024ae24c9a6cf1d2edf76f49.jpg",
};

const mockAssignedUsers = [
  {
    name: "John Doe",
    avatarUrl: "https://cdn.21st.dev/assets/mirror/38/388de849a8a0cac613d63c4a11e61f3b2f853997ac9b5d28e4268d41ece147a5.jpg",
  },
  {
    name: "Jane Smith",
    avatarUrl: "https://cdn.21st.dev/assets/mirror/22/2227f27555cfdda5ca407e3706a473660e40a64d3e026a961f24197066e55aa2.jpg",
  },
  {
    name: "Sam Wilson",
    avatarUrl: "https://cdn.21st.dev/assets/mirror/4f/4fb45af36b546e069b72527fdf4d904855a2b11b301fa738c8bc4d235595c4df.jpg",
  },
];

const mockComments = [
  {
    id: 1,
    user: {
      name: "Insan Kamil",
      role: "Design Lead",
      avatarUrl: "https://cdn.21st.dev/assets/mirror/a3/a37358a09c532474e3246a94e5e5104b1b6b6907f83b44259509f8c776506120.jpg",
    },
    timestamp: "Friday 3:12 PM",
    message: "Hey guys, I updated the document ya.",
  },
  {
    id: 2,
    user: {
      name: "Miguel Lorenzo",
      role: "Project Manager",
      avatarUrl: "https://cdn.21st.dev/assets/mirror/ff/ff4b0fe2f7d11aff0d68f760e5fdcfeebf8b884c024ae24c9a6cf1d2edf76f49.jpg",
    },
    timestamp: "Friday 3:15 PM",
    message: "Thanks, Insan! Reviewing it now.",
  },
];

const ProjectTicketDemo = () => {
  return (
    <div className="flex min-h-[600px] w-full items-center justify-center bg-background p-4 md:p-10">
      <ProjectTicketCard
        projectName="Revamp Payment"
        status="In Progress"
        projectManager={mockProjectManager}
        assignedTo={mockAssignedUsers}
        timeline={{ startDate: "12/12/2024", endDate: "04/01/2025" }}
        comments={mockComments}
        isDraft={true}
      />
    </div>
  );
};

export default ProjectTicketDemo;