How do I use Ride Pickup in my project?

Copy the RidePickupWidget source code from https://opensourceui.in/components/ride-pickup, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Ride Pickup in a commercial project?

Yes. Opensource UI is MIT licensed. You can use RidePickupWidget in personal and commercial projects without UI attribution.

Back to Travel

Components / Travel

Ride Pickup

Uber-style pickup card with brand, ETA, car illustration, and vehicle ID. The waiting-screen moment, ready to paste into a mobility app.

Preview

Uber2 min

Meet at the pickup point

Mercedes-Benz S00121

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/travel/ride-pickup-widget.tsx in your project.
4
Import and render:
Example
import { RidePickupWidget } from "@/components/travel/ride-pickup-widget";
<RidePickupWidget eta="2 min" message="Meet at the pickup point" vehicle="Mercedes-Benz S00121" image="/car.png" />

lib/cn.ts

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

components/travel/ride-pickup-widget.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
"use client";
 
import { forwardRef, type ComponentPropsWithoutRef } from "react";
import Image from "next/image";
 
import { cn } from "@/lib/cn";
import { Car } from "lucide-react";
 
// Ride-hailing pickup card — ETA, vehicle info, and driver photo.
export type RidePickupWidgetProps = Readonly<
  {
    eta?: string;
    message?: string;
    vehicle?: string;
    image?: string;
  } & ComponentPropsWithoutRef<"div">
>;
 
// Production-ready Ride Pickup component — styled with Tailwind CSS.
export const RidePickupWidget = forwardRef<
  HTMLDivElement,
  RidePickupWidgetProps
>(
  (
    {
      className,
      eta = "2 min",
      message = "Meet at the pickup point",
      vehicle = "Mercedes-Benz S00121",
      image = "/car.png",
      ...props
    },
    ref,
  ) => (
    <div
      ref={ref}
      data-slot="ride-pickup-widget"
      className={cn(
        "flex h-44 w-44 flex-col rounded-3xl border border-neutral-100 bg-white font-sans shadow-lg",
        className,
      )}
      {...props}
    >
      <div className="flex items-center justify-between px-4 pt-4">
        <span className="text-xs font-bold tracking-wide text-neutral-900">
          Uber
        </span>
        <span className="text-[10px] font-bold text-green-500">{eta}</span>
      </div>
 
      <div className="relative mx-auto my-2 h-20 w-32">
        <Image
          src={image}
          alt={vehicle}
          fill
          className="object-contain"
          sizes="128px"
        />
      </div>
 
      <div className="mt-auto rounded-b-3xl bg-neutral-50 px-4 py-3">
        <p className="text-[11px] font-semibold text-neutral-900">{message}</p>
        <p className="flex items-center gap-1 text-[10px] text-neutral-500">
          <Car size={10} />
          {vehicle}
        </p>
      </div>
    </div>
  ),
);
 
RidePickupWidget.displayName = "RidePickupWidget";

"use client"; import { forwardRef, type ComponentPropsWithoutRef } from "react"; import Image from "next/image"; import { cn } from "@/lib/cn"; import { Car } from "lucide-react"; // Ride-hailing pickup card — ETA, vehicle info, and driver photo. export type RidePickupWidgetProps = Readonly< { eta?: string; message?: string; vehicle?: string; image?: string; } & ComponentPropsWithoutRef<"div"> >; // Production-ready Ride Pickup component — styled with Tailwind CSS. export const RidePickupWidget = forwardRef< HTMLDivElement, RidePickupWidgetProps >( ( { className, eta = "2 min", message = "Meet at the pickup point", vehicle = "Mercedes-Benz S00121", image = "/car.png", ...props }, ref, ) => ( <div ref={ref} data-slot="ride-pickup-widget" className={cn( "flex h-44 w-44 flex-col rounded-3xl border border-neutral-100 bg-white font-sans shadow-lg", className, )} {...props} > <div className="flex items-center justify-between px-4 pt-4"> <span className="text-xs font-bold tracking-wide text-neutral-900"> Uber </span> <span className="text-[10px] font-bold text-green-500">{eta}</span> </div> <div className="relative mx-auto my-2 h-20 w-32"> <Image src={image} alt={vehicle} fill className="object-contain" sizes="128px" /> </div> <div className="mt-auto rounded-b-3xl bg-neutral-50 px-4 py-3"> <p className="text-[11px] font-semibold text-neutral-900">{message}</p> <p className="flex items-center gap-1 text-[10px] text-neutral-500"> <Car size={10} /> {vehicle} </p> </div> </div> ), ); RidePickupWidget.displayName = "RidePickupWidget";