shadcn.io is not affiliated with official shadcn/ui
City Guide Walking Tours Map Block for Svelte
Tabs for three themed walks, History, Food and Architecture, each with its own dashed route and five stops on one drawn town, with the walking, stop and total times derived.
Installation
Overview
Choose a walk by its theme, with this city guide map for Svelte with Ark UI. Strollwick, a walking tour company, draws one invented town, Merrowgate, and three walks across it. Tabs switch between History, Food and Architecture, and each walk has its own dashed route and five stops with a dwell time. The time of every leg is derived from the distance at 12 minutes a kilometre, and three cells sum the walking, the time at the stops and the whole walk. The stops are numbered pins on the map and the same five rows in the list, each with a sentence about the place and the walk to it. The audio guide is a typed label that says "No audio in this demo". The three walks have the same number of stops, so changing tab never moves anything below the map. It's built from Tabs and Guides, with a CSS entrance only. For tour operators, tourist boards, museums and any guide with more than one route.
FAQ
How is the length of a walk worked out?
Each stop has a typed position and a dwell time in minutes. The legs are the straight distances between consecutive stops divided by UNITS_PER_KM, converted at MINUTES_PER_KM and rounded to a minute; the walking time is their sum, and the whole walk is the walking plus the dwell times.
How do I use my own walks?
Edit SPECS: each walk has a label, a tagline, an audio length and its stops with a name, a note, a dwell time and a position. Keep the same number of stops in every walk so the tabs hold their height. In your app, replace the straight legs with routes from your own map layer.
Does the audio guide play?
No. It is a label that states how long the narration is, and says "No audio in this demo". In your app, put your player in that row and keep the label for walks without audio.
Can I use it without a mouse?
Yes. The tabs take the arrow keys, the stops are an ordered list that gives the same facts as the pins, and a polite message summarises the new walk once the tabs settle. The map and its pins are decoration hidden from assistive technology.