Ride Booking Form

Heroes 315

About

Ride Booking Form This component provides a complete UI for scheduling a ride, including location inputs, date/time selectors, and a call-to-action button. It's designed to be easily integrated into any application requiring a booking interface.

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

Code

How Ride Booking Form is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import { RideBookingForm } from "@/components/ui/ride-booking-form"; // Corrected import path

const Demo = () => {
  // Handler for the form submission
  const handleSearch = (details: {
    pickup: string;
    dropoff: string;
    date: string;
    time: string;
  }) => {
    console.log("Searching for a ride with details:", details);
    alert(`Searching from ${details.pickup} to ${details.dropoff}`);
  };

  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-muted">
      <RideBookingForm
        imageUrl="https://cn-geo1.uber.com/image-proc/crop/resizecrop/udam/format=auto/width=1344/height=896/srcb64=aHR0cHM6Ly90Yi1zdGF0aWMudWJlci5jb20vcHJvZC91ZGFtLWFzc2V0cy9hM2NmODU2NC1lMmE2LTQxOGMtYjliMC02NWRkMjg1YzEwMGIuanBn"
        city="Chandigarh, IN"
        onSearch={handleSearch}
        className="my-8"
      />
    </div>
  );
};

export default Demo;