Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Parking Product Card Block for Vue

A car park card where an arrival select, a stay toggle group and a bay-kind toggle group write the leave-by time and the price, and a plan of 24 bays shows which are free for that stay.

UI library: Ark UI

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 what a stay costs and where there is room with this parking product card for Vue with Ark UI. A framed plan draws 24 bays in three rows between an entrance and an exit. A native select sets the arrival from 08:00 to 18:00, a Toggle Group sets the stay (1, 2, 4, 8 hours or All day) and a second one picks the kind of bay: Standard, EV charging or Accessible. The plan shows the chosen kind: free bays are solid, taken ones are hatched, the other kinds stand back. The card writes "Leave by 16:00" and the price from a typed rate table, and says when the car park's 22:00 closing cuts a stay short. The one Shine Button holds the first free bay. Money is integer cents. Nothing is held or charged. For car parks, lockers, charging points and anything with numbered places.

FAQ

How do I change the bays and the prices?

Edit LAYOUT (one letter per bay), BUSY (the hours each bay is taken) and KINDS, whose cents list holds the price for 1, 2, 4 and 8 hours and the whole day. A bay is free when none of its BUSY hours overlap the stay.

What if the stay runs past closing?

The leave-by time stops at 22:00 and the card says so, so a long stay is never promised past closing. The price is still the one for the length chosen.

What stays local, and how do I wire it for real?

The choices and the hold are page state; nothing is held or charged. Replace the body of hold and release with calls to your parking service, and ask it which bay it gave you, since another driver may have taken the first one.

Which day is it?

A fixed one, Mon 12 Oct, counted from a fixed "today" (AS_OF), so the card looks the same on every load. In a real car park take the date from the picker you already have.

How does it look on a phone?

The plan comes first at full width with its 24 bays, and the controls sit under it. The price and the leave-by time stay together above the button.

Is it accessible?

The plan is read as a list of bays, each saying free or taken, and bays of other kinds are hidden from assistive technology so only the chosen kind is announced. The count of free bays is written out in a sentence, and every change is announced by the status line.

All 100 product cards blocks