Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Cruise Routes Map Block for Vue

A ten-day cruise through an invented archipelago: a Day slider moves the ship along the route, solid where sailed and dashed ahead, with an itinerary of arrival and departure times and the miles to the next port.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a voyage day by day, with this cruise routes map for Vue with Ark UI. Marrowtide, a small-ship cruise line, draws an invented archipelago of six islands with a numbered port on each shore and a route that visits them in a loop over ten days. A Slider from day 1 to day 10 moves the ship along the route, with the part already sailed solid and what remains dashed; the itinerary at the start lists the ten days with arrival and departure times or "At sea", and choosing a day there, or a port on the map, moves the ship as well. The readout under the slider gives the place, the times and the nautical miles to the next port. The slider speaks the whole sentence ("Day 4, in port at Lanyard Isle, 118 nm to Corbel Harbour"). It's built from Slider and Guides, with a CSS entrance only. For cruise lines, tour operators and trip planners.

FAQ

How is the route drawn?

Each day has a position in STOP_LINES, and the route is a smooth curve through the ten positions, one cubic segment per leg. The part already sailed is the legs up to the chosen day, drawn solid and heavy, and the rest is the remaining legs, dashed, so the two always join at the ship.

Where do the nautical miles come from?

From the straight legs between the day positions, summed up to the next port and divided by UNITS_PER_NM. The drawing is not to scale, so they are only as good as that typed scale; the caption says the data is a sample.

Can I use it without a mouse?

Yes. The slider takes the arrow keys and speaks the day in words, each day in the itinerary is a button, and the current day carries aria-current. The ports and the ship on the map are decoration for the pointer, and a polite message speaks the day once the slider rests.

How do I use my own itinerary?

Edit STOP_LINES: each day has a number, a port id (or sea), a place, arrival and departure times and a position in the 480 by 360 units. Ports are numbered in the order they are first visited, and the islands are drawn from ISLANDS.

What stays local in the demo, and how do I wire it up?

All of it. The ports, times and distances are invented and nothing can be booked. In your app load the sailing from your itinerary service and open a port's day into the excursion booking flow.

How does it look on a phone?

The map comes first at a fixed height with the slider and the readout under it, then the itinerary in a scroll box of fixed height. The readout keeps its height whether the ship is at sea or in port.

All 100 map blocks