Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Gas Stations Map Block for Vue

Eight fuel stations on a drawn street map whose pins become price pills for the grade you pick; a litres field totals a fill at each and ranks them against the average.

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 drivers where a fill costs least, with this gas stations map for Vue with Ark UI. Pumpwell, a fuel-price site, draws the invented town of Ormsgill as an SVG street map with a canal and a park, and eight stations as pills. A Toggle Group picks the grade (Regular, Mid, Premium or Diesel) and every pill shows that grade's price a litre; the cheapest is solid and carries the word "Cheapest". A Number Input sets the litres, 40 to begin with, and the list under the map totals a fill at each station and ranks them, cheapest first, saying how far each total sits from the average of all eight ("$2.40 under the average"), with the extras in words: shop, air and water, car wash, EV charging, open 24 hours. The heading states the average. Pressing a pin or a row marks the station. A polite status line speaks the result once the controls settle. It's built from Toggle Group, Number Input, Badge and Guides, with a CSS entrance only. For fuel-price sites, fleet cards and trip planners.

FAQ

How do I list my own stations?

Edit STATION_LINES. Each line is an id, a name, a position in the drawing's 480 by 360 units, four prices (Regular, Mid, Premium, Diesel) and the extras as a phrase. Prices are in thousandths of a dollar a litre, so 1689 is $1.689. In your app load the prices from your own feed and keep quotesOf as the one place a total is worked out.

How is a total worked out?

The litres times the price a litre, in integer cents: 40 litres at $1.689 is $67.56. The average is the mean of all eight totals for the grade, and each row says how far its total is above or below it. Prices are sample data, not a feed, and the fuel stations and their names are invented.

What does the litres field accept?

Whole litres from 0 to 120, typed or stepped with the buttons or the arrow keys. A blank field counts as 0 and anything higher is held at 120. Digits typed in other scripts, such as Arabic-Indic digits, are read correctly.

Can I use it without a mouse?

Yes. The grade toggle is one tab stop and takes the arrow keys, the litres field has its own buttons, and the stations are a list of buttons, one tab stop each. The pins are hidden from assistive technology and skipped by the Tab key because each row says the same things in text.

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

All of it. The prices never change, nothing is looked up and choosing a station only marks it. In your app refresh the prices on a schedule, show when they were last reported, and make the row open the station's page.

How does it look on a phone?

The grade toggle wraps above the litres field, the map keeps its full width and a fixed height, and the ranked stations sit under it in a box that scrolls on its own, so the page never jumps when you change the grade.

All 100 map blocks