Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Airport Terminal Map Block for React Aria

A drawn terminal floor plan with three concourses of four gates under a flight board; choosing a flight rings its gate button and draws the walk from security with the minutes and metres worked out from the route.

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 where a gate is and how long it takes to reach it with this airport terminal map for React with React Aria. Pierwick, an airport information screen, draws a floor plan rather than a street map: a hall with a security checkpoint, a food court and three concourses, A, B and C, with four gates each. Under it a flight board lists eight invented departures with a Badge for each status in words, On time, Boarding or Delayed with the new time. Choosing a flight, in the board or on the plan, rings its gate and draws a dashed route from security; a readout gives the gate, the walk in minutes and the distance in metres, all worked out from the route's length. A multi-select ToggleGroup limits the board to some concourses and dashes the other gates, and choosing none shows an empty state without changing the height. For airports, stations, hospitals, campuses and any building with a plan.

FAQ

How is the walk worked out?

routeOf joins security, the hall, the spine of the terminal, the pier of the gate's concourse and the gate's bay as a list of points. lengthOf adds the legs in drawing units, metresOf multiplies by METRES_PER_UNIT and rounds to ten metres, and minutesOf divides by PACE, 80 metres a minute, rounded up. It is simplified: no queues, no moving walkways and no boarding time.

Are the gates on the plan real buttons?

Yes. A gate that has a flight is a button that reads "Gate B3, HLD 731 to Madrid" and toggles that flight; the other bays are drawn only. The board has a row for every flight, so the two ways in stay in step, and the board is the one a keyboard user is likely to take.

Can I use it without a mouse?

Yes. Concourses are a toggle group with the arrow keys, each flight is a row button in the board, and the gate buttons are in the plan's tab order. A polite message gives the chosen flight, its gate and the minutes' walk.

How do I use my own flights and plan?

Edit FLIGHT_LINES (flight, destination, gate, time, status and the new time when delayed) and CONCOURSES, where each pier has its position in the drawing's 480 by 360 units. Gates are positioned from their number along the pier. The times are fixed text and "now" is the constant AS_OF.

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

All of it. The airlines, flights and statuses are invented, no gate is real and nothing is booked. In your app feed the board from your flight-information service and replace the route with your wayfinding graph.

How does it look on a phone?

The concourse filter scrolls sideways, the plan keeps a fixed height, the readout sits in three cells under it, and the board drops its destination and time columns, repeating them under the flight code in the first cell.

All 100 map blocks