Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Trip Planner Map Block for Vue

A drawn island with eleven stops over three days: a tab per day shows numbered stops on a solid route, a Move to day select re-times each day's drive, and Export downloads a text itinerary.

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

Plan a holiday drive one day at a time, with this trip planner map for Vue with Ark UI. Wanderkit, a holiday planner, draws the invented island of Karrow Holm as an SVG map with shallows, hills and wave marks and eleven stops over three days. A Tabs list picks the day; that day's stops are numbered solid pins joined by a solid route, and the other days' stops are small hollow pins on a dotted route (press one to open its day). The side list shows the day's stops in driving order, each with its type, the drive from the stop before and a "Move to day" select; moving a stop re-derives both days, so the caption reads "Day 1: 2 h 18 of travel". An empty day shows an empty state. The header's Export button downloads the itinerary as a plain-text file with a real download. It's built from Tabs, Native Select, Download Trigger, Button, Empty and Guides, with a CSS entrance only. For travel, tour and road-trip apps.

FAQ

How is the driving time worked out?

A day visits its stops in circuit order (order on each stop). travelOf adds the straight legs between them in drawing units, divides by UNITS_PER_KM and the speed SPEED_KMH, and lengthWord prints hours and minutes. It counts driving only, not time at the stops, and it is a sketch, not a route: no routing service is called.

How do I move a stop to another day?

Use the "Move to day" select on its row; the keyboard route is the list, so everything the pins do is also a button or a select there. The stop joins the other day in circuit order, both days re-time and the polite message names the day and its new travel time. Pressing a hollow pin on the map opens its day.

What does Export download?

A real text file, karrow-holm-itinerary.txt, built from the current state: each day with its travel time and its stops in order. It uses the download trigger, so nothing is uploaded.

How do I use my own island and stops?

Edit STOPS (a name, a kind, a position, a starting day and an order along the circuit), DAYS and the coast points at the top of the file; the shallows and hills are drawn from them. The scale constants are UNITS_PER_KM and SPEED_KMH.

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

Everything: the island, the stops and the times are invented and the plan lives in this tab. In your app save the plan from moveStop to your API, and replace driveOf with times from your routing provider.

How does it look on a phone?

The day tabs come first, then the map at a fixed height, then the day's stops stacked under it with their selects. The day counts in the tabs hide on the narrowest screens, and each day's list is a scroll region of fixed height.

All 100 map blocks