shadcn.io is not affiliated with official shadcn/ui
Annotated Mockup Pin Tooltips Features Block for React
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 Base 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 popup's initialFocus is false, 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.
Related
- Pro
Hover Accordion Mockup Split Features
Tabs and accordionsA features section for an operations console: an accordion of four features whose open row swaps the console screen drawn in a framed figure beside it, by pointer, focus or tap.
- Pro
Alternating Mockup Rows Features
Alternating rowsThree alternating bands for a support back office, each pairing a sentence with a browser window that holds a different admin screen: a filtered ticket table, a settings form with toggles and a weekly chart with its legend.
- Pro
Heatmap Density Grid Features
Metrics and chartsA 24 by 12 traffic density grid in a framed figure with a legend, three numbered callout cells, and the callouts described beside it, for a traffic observability tool.
- Pro
Dashboard Preview Hero
Product windowsA showcase hero with a headline, a Shine Button, an outline button and a trust line above a wide browser window in a hairline frame, a greyscale sketch of an analytics dashboard that runs on below the fold.
- Pro
Aspect Ratio Mockup Cards Features
Card gridsA six-cell report-type grid for a reporting tool: a trend line, a table, a funnel, a ranked list, a heat strip and a donut, each drawn on a 4:3 plate above its title and one sentence.
- Pro
Added Removed Diff List Features
App screensA unified diff of one config file in a hairline frame, with + and - gutters in foreground weights, one caption beside each hunk, folded runs of unchanged lines that open in place, and a footer counting the changes.