Ride Booking

Booking17: Ride Booking

A single-card ride-share booking form that stacks pickup and drop-off text inputs joined by a vertical route indicator, a "now" / "later" schedule tab pair with a contextual hint line, a divided list of selectable ride classes each showing an icon, label, optional popular badge, ETA, seat capacity and fare, an optional payment method row, and a sticky footer that echoes the selected ride's fare next to a confirm button.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/booking17?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/booking17?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/booking17.tsx, plus the badge, button, and tabs shadcn/ui primitives it uses for the section eyebrow and ride popular badge, the confirm button, and the schedule now/later toggle.

Quick start

The installed file exports booking17Demo alongside the block: the exact props behind the preview above. Spread it to get a working ride booking card in one line.

import { Booking17, booking17Demo } from "@/components/beste/block/booking17";

export default function Page() {
  return <Booking17 {...booking17Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Car, CarFront, Truck } from "lucide-react";
import { Booking17 } from "@/components/beste/block/booking17";

export default function Page() {
  return (
    <Booking17
      badge={{ label: "Transfer", variant: "secondary" }}
      heading="Book your <strong>ride</strong>"
      currency="$"
      defaultPickup="Atatürk Airport, Terminal 2"
      defaultDropoff="Hilton Istanbul Bosphorus"
      rideClasses={[
        { value: "economy", label: "Economy", description: "Affordable rides for up to 4", capacity: 4, eta: "3 min", price: 18, icon: CarFront },
        { value: "comfort", label: "Comfort", description: "Newer cars with more legroom", capacity: 4, eta: "5 min", price: 26, icon: Car, popular: true },
        { value: "xl", label: "XL", description: "Extra space for groups & luggage", capacity: 6, eta: "7 min", price: 38, icon: Truck },
      ]}
      paymentMethod={{ label: "Visa •••• 4242", description: "Default card" }}
      labels={{ scheduleNowLabel: "Now", scheduleLaterLabel: "Later", bookButton: "Confirm ride" }}
    />
  );
}

Props

type RideClass = {
  value: string;
  label: string;
  description: string;
  capacity: number;
  eta: string;
  price: number;
  icon: LucideIcon;
  popular?: boolean;
};

type Booking17Labels = {
  pickupLabel?: string;
  pickupPlaceholder?: string;
  dropoffLabel?: string;
  dropoffPlaceholder?: string;
  scheduleLabel?: string;
  scheduleNowLabel?: string;
  scheduleLaterLabel?: string;
  scheduleHintNow?: string;
  scheduleHintLater?: string;
  popularBadge?: string;
  paymentLabel?: string;
  etaPrefix?: string;
  capacitySuffix?: string;
  totalLabel?: string;
  bookButton?: string;
};

Behavior notes

• The pickup and drop-off inputs, the schedule tab ("now" / "later"), and the selected ride class are all held in internal useState and are never surfaced through props or callbacks, so the parent cannot read or control the current selection.
• The initial ride class is resolved once at mount: the first entry whose popular is true, otherwise the first ride in rideClasses, otherwise an empty string when the list is empty.
• heading is rendered through dangerouslySetInnerHTML, so inline <strong> markup is honored and picks up the primary-color bold styling; any other supplied HTML is injected verbatim.
• The confirm button is disabled unless a ride is selected and both the pickup and drop-off inputs are non-empty; when enabled, clicking it only calls console.log(...) with the booking payload, so wiring an actual submit is left to the integrator.
• The whole header block (badge, heading, description) is only rendered when at least one of those three props is provided, and the payment row is omitted entirely when paymentMethod is absent.
• The schedule hint paragraph swaps between scheduleHintNow and scheduleHintLater based on the active tab, but the choice has no other effect: no date or time picker is rendered for the "later" option.
• The footer total reads activeRide?.price ?? 0, so it falls back to 0 (prefixed by currency) whenever no ride is selected, and the per-row and footer fares are static numbers with no quantity or distance math applied.