Travel Card

Cards

About

Travel Card This component displays travel details in a clean, organized card layout. It's designed to be highly reusable, taking in all necessary information—such as travel name, times, rating, and price—through props. It uses framer-motion for smooth animations on load and hover.

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

Code

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

Usage.tsx

// demo.tsx (Corrected)

import { TravelCard } from '@/components/ui/travel-card'; // Corrected import path

const TravelCardDemo = () => {
  const handleViewSeats = () => {
    alert('Redirecting to seat selection...');
  };

  return (
    <div className="flex w-full items-center justify-center bg-background p-8">
      <TravelCard
        travelsName="New Himalaya Travels"
        busType="Volvo A/C Semi Sleeper (2+2)"
        rating={4.3}
        reviewsCount={8}
        departureTime="20:00"
        arrivalTime="01:25"
        duration="5h 25m"
        availableSeats={38}
        price={1889}
        logoSrc="https://www.redbus.in/rpwassets/public/images/primo.svg" // Replace with a real logo URL for "Primo"
        offerTag="Minimum 10% off on return ticket"
        onViewSeats={handleViewSeats}
      />
    </div>
  );
};

export default TravelCardDemo;