Shadcn.io is not affiliated with official shadcn/ui
Map Cruise Routes
Interactive cruise route map with port markers, colored route lines between ports, ship position indicator, and day-by-day itinerary panel built with mapcn, shadcn/ui, and Tailwind CSS
Plan and visualize cruise itineraries with this interactive map block for React and Next.js. View route lines connecting port cities, browse day-by-day stops with arrival and departure times, and track the current ship position on the map. Each port marker reveals details including excursion highlights and docking duration. Built with TypeScript, mapcn Map, MapMarker, MapRoute, and MapPopup components, shadcn/ui Badge and Button, and Tailwind CSS. Ideal for cruise booking platforms, travel planners, and maritime tracking dashboards.
Related Components
Airport Terminal Map
Gate and flight status map
Concert Venues Map
Venue finder with show info
Farmers Markets Map
Market directory map
Park Finder Map
Green space discovery
Hiking Trails Map
Trail route explorer
FAQ
Was this page helpful?
Sign in to leave feedback.
Crime Heatmap
React crime statistics heatmap map block for Next.js with incident type filters, neighborhood safety scores, time-period selector, and incident detail overlays using shadcn/ui and Tailwind CSS
Delivery Zones
React delivery zone map block for Next.js with radius circles, zone boundaries, estimated delivery times per zone, and zone statistics panel using shadcn/ui and Tailwind CSS