Trip Details Card

Cards 63

About

Trip Details Card A reusable card component to display travel or booking information, featuring a header, details section, and a configurable action toolbar. It's designed with framer-motion for a subtle entry animation.

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

Code

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

Usage.tsx

import { 
  TripDetailsCard,
  type TripAction,
} from "@/components/ui/trip-details-card";
import { 
  XCircle, 
  RefreshCcw, 
  History, 
  FileText, 
  Download 
} from "lucide-react";

// Demo component to showcase the TripDetailsCard
export default function TripDetailsCardDemo() {
  
  // Define sample actions for the card's toolbar
  const tripActions: TripAction[] = [
    {
      label: "Cancel flights",
      icon: XCircle,
      variant: "ghost",
      onClick: () => alert("Cancel flights clicked!"),
      // Custom styling for destructive action
      className: "text-red-500 hover:bg-red-500/10 hover:text-red-600 dark:hover:bg-red-500/10 dark:hover:text-red-500"
    },
    {
      label: "Calculate refund",
      icon: RefreshCcw,
      variant: "ghost",
      onClick: () => alert("Calculate refund clicked!"),
    },
    {
      label: "Reschedule flights",
      icon: History,
      variant: "ghost",
      onClick: () => alert("Reschedule flights clicked!"),
    },
    {
      label: "Download invoice",
      icon: FileText,
      variant: "ghost",
      onClick: () => alert("Download invoice clicked!"),
    },
    {
      label: "Download ticket",
      icon: Download,
      variant: "ghost",
      onClick: () => alert("Download ticket clicked!"),
    },
  ];

  return (
    <div className="w-full min-h-screen bg-background flex items-center justify-center p-4">
      <TripDetailsCard
        origin="Chandigarh"
        destination="Lucknow"
        travelerName="Kavi"
        status="upcoming"
        tripId="250793635642"
        travelDate={new Date("2025-10-20T00:00:00Z")}
        actions={tripActions}
      />
    </div>
  );
}