shadcn.io is not affiliated with official shadcn/ui
Annotated Mockup Pin Tooltips Features Block for Ark UI
A shipping-ops console drawn in greyscale with six numbered pins that open a popover on click, tap or Enter, and a legend of six rows in shared hairlines that opens the same popovers.
Installation
Overview
An annotated mockup feature section for React with Ark UI, written for Cargoview, a fictional shipping-ops console. A compact header sits over the console, drawn in greyscale from your theme's tokens in a hairline frame with + marks on its corners: a top bar with a bell, lane filters and an export button, a table of loads, a route map and a dock-capacity chart. Six numbered pins sit on it. Click, tap or press Enter on a pin and a popover names that part and says what it does; the open pin is filled with the foreground colour and pulses. Under the console, a band of six legend rows in shared hairlines opens the same popovers, so you can scan the list instead of hunting for pins. Only one popover is open at a time, and Escape or a click elsewhere closes it. It's built from Popover and Guides with CSS transitions, and your theme's tokens for every colour: no element is in your primary colour, and there is no call to action. For dashboards, admin tools and any product whose screen needs a guided tour.
FAQ
How do I change the pins and the legend?
Edit PINS at the top of the file: each pin has a number, a title, one sentence, a position (x and y, in percent of the console) and the side its popover opens on. The pins and the six legend rows are both rendered from that list, so they always agree. Draw your own product in Console, placed by percent as well so a pin lands on the part it names at any width.
How does the popover open and close?
One active value holds the open pin's id, and each pin's popover is controlled by it. A pin or a legend row sets it; Escape, or a click outside, clears it for that pin. The popovers aren't modal, so focus stays where it was: opening one from the legend doesn't pull you out of the list.
The popover's modal is off and its autoFocus is off, so focus stays on the pin or the legend row that opened it.
Why don't pins open on hover?
A popover that opens when the pointer passes over it closes again under a thumb and opens by accident while you aim for another pin. Opening on click, tap and Enter works the same for mouse, touch and keyboard, and the legend gives the overview that a hover preview would.
How do screen readers and keyboards handle it?
The console is decoration: it is aria-hidden and inert, and the real content is the six legend rows and the pins. Each pin is a button named "Pin 3: Route map" that reports whether its popover is open; each legend row is a button with a pressed state and its title and sentence as text. Tab moves through the pins and the legend, Enter and Space open them, and Escape closes the open popover. The pulse of the open pin is off with reduced motion.
How does it fit on a phone?
The console keeps its pins at the same places on a shorter frame, simplified (the table loses its ID column and a few labels), and the pins shrink slightly but stay thumb-sized. The legend becomes one column of six rows, so reaching any pin from the list is a single tap. Popovers stay inside the screen at 320 pixels.