Flight Ticket

Cards 47

About

Flight Ticket This component renders a detailed flight ticket. It is built to be highly reusable, accepting props for all dynamic content such as flight details, passenger information, and dates. It uses framer-motion for a subtle 3D hover effect and a staggered entrance animation for the passenger list, fulfilling the request for advanced animation. The styling is fully adaptive to your shadcn/ui theme.

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

Code

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

Usage.tsx

import { FlightTicket } from "@/components/ui/flight-ticket"; // Adjust path as needed

export default function FlightTicketDemo() {
  const ticketData = {
    departure: {
      code: "AMS",
      name: "Amsterdam Airport Schiphol",
    },
    arrival: {
      code: "CGK",
      name: "Soekarno Hatta International Airport",
    },
    flightDate: new Date("2024-04-29T14:15:00"),
    passengers: [
      {
        name: "Mr. Jonathan Wise",
        type: "Adult" as const,
        baggage: "20kg",
      },
      {
        name: "Mrs. Samantha William",
        type: "Adult" as const,
        baggage: "20kg",
      },
      {
        name: "Ms. Karen Summer",
        type: "Child" as const,
        baggage: "20kg",
      },
    ],
  };

  return (
    // The background is set to a neutral color to highlight the ticket
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
      <FlightTicket
        departure={ticketData.departure}
        arrival={ticketData.arrival}
        flightDate={ticketData.flightDate}
        passengers={ticketData.passengers}
      />
    </div>
  );
}