Flight Card

Cards 215

About

Flight Card A visually polished card component to display flight details, complete with animations and theme support.

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-1"; // Adjust the import path

export default function FlightCardDemo() {
  const flightData = {
    imageUrl: "https://cdn.21st.dev/assets/mirror/46/4602cdce6e0c0860b9aadb39281ddb3d77e43bc7849afb0f277ab8f490523da4.jpg",
    airline: "Lion Air",
    flightCode: "JT 880",
    flightClass: "Economy",
    departureCode: "SUB",
    departureCity: "Surabaya",
    departureTime: "08:45 PM",
    arrivalCode: "SIN",
    arrivalCity: "Singapore",
    arrivalTime: "12:10 AM",
    duration: "3 Hours 25 Minutes",
  };

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