Flight Status Card

Cards 70

About

Flight Status Card A modern, animated card component to display real-time flight information, including boarding status, gate details, and timelines, designed to be easily integrated into any travel-related application.

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

Code

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

Usage.tsx

// demo.tsx

import React, { useState, useEffect } from 'react';
import { FlightStatusCard } from '@/components/ui/flight-status-card';
import { PlaneTakeoff } from 'lucide-react';

const FlightStatusCardDemo = () => {
  const [progress, setProgress] = useState(0);

  // Animate progress for demonstration purposes
  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => (prev >= 100 ? 0 : prev + 5));
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="flex items-center justify-center h-screen bg-background p-4">
      <FlightStatusCard
        airlineName="AIR CANADA"
        airlineLogo={<PlaneTakeoff className="h-6 w-6 text-red-600" />}
        planeImageSrc="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-ofFaHj1aADhV9vhZ5kUv0TLyEblR1U.png&w=320&q=75" // Replace with your actual plane image URL
        flightNumber="AC287"
        gate="E7"
        origin={{ city: 'Toronto', code: 'YYZ' }}
        destination={{ city: 'Paris', code: 'CDG' }}
        status={{ text: 'On Time', color: 'green' }}
        boardingStatusText="Boarding"
        boardingTimeLeft="5m left"
        gateCloseTime="9:15 PM"
        boardingStartTime="8:45 PM"
        boardingEndTime="9:15 PM"
        progressPercent={progress}
      />
    </div>
  );
};

export default FlightStatusCardDemo;