Flight Card

Cards 52

About

Flight Card A responsive card component to display flight details, including airline information, timings, duration, price, and a call-to-action.

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

Code

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

Usage.tsx

import { FlightCard } from "@/components/ui/flight-card";

const FlightCardDemo = () => {
  // Sample data with an image URL for the logo
  const flightData = {
    airline: {
      name: "IndiGo",
      // Replaced the SVG component with a placeholder image URL
      logo: "https://cdn.21st.dev/assets/mirror/b4/b4538c65f427b5a7c7804d8a266eac3d44a5aded5d239f71fbb750a9dfdc455d.svg",
      flightNumber: "6E-2195",
    },
    departureTime: "12:45",
    arrivalTime: "20:00",
    duration: "7h 15m",
    stops: 1,
    price: 6916,
    currency: "INR",
    offer: "Get ₹968 off with Axis Cards",
    refundableType: "Partial Refundable",
  };

  // Dummy functions for button actions
  const handleBook = () => {
    alert(`Booking flight ${flightData.airline.flightNumber}...`);
  };

  const handleFlightDetails = () => {
    alert(`Showing details for flight ${flightData.airline.flightNumber}...`);
  };

  return (
    <div className="w-full min-h-[350px] flex items-center justify-center bg-background p-4">
      <FlightCard 
        {...flightData}
        onBook={handleBook}
        onFlightDetails={handleFlightDetails}
      />
    </div>
  );
};

export default FlightCardDemo;