Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Magnifier Lens Features Block for Vue

An inspection lens over a dense latency table: a magnified copy clipped to a circle follows the pointer and a readout names the cell under it, with arrow keys to move it and a tap-to-pin readout on a phone.

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

A data inspector for Vue with Ark UI. A dense table of eight routes and five measures sits in a hairline frame with + marks on its corners. As the pointer moves, a lens follows it: a second copy of the table, magnified 2.2 times, clipped to a circle, with the cell under the pointer marked. A readout band under the table names that cell ("Row 4 · GET /v2/customers · p95 · 61 ms"). The table is a real table; the arrow keys move the lens cell by cell when the figure has focus, Escape puts it away, and on a phone a tap pins the readout to a cell instead of showing the lens. The page's rails and top rule come from the Guides spine. It's built from Kbd and Guides, two CSS variables written by a pointer handler, and your theme's tokens for every colour. For analytics, observability and any page that has to show dense numbers honestly.

FAQ

How do I change the table?

Edit COLUMNS and ROWS at the top of the file: each row has a route and one string per column in values. Columns with keep: false drop out on a phone to keep the table readable. The readout, the lens and the highlight all read from the same two arrays.

How does the lens work?

The lens is a circle with a second copy of the table inside it, scaled 2.2 times from its top corner and shifted so the point under the pointer lands at the centre. A pointer handler writes the point as CSS variables (and the table's width, so the copy lays out the same); everything else is CSS. The copy is hidden from assistive technology and inert, and the real table is the one that is read.

Does it work from the keyboard?

Yes. The figure is a tab stop. When it has focus the lens appears on the first cell, the arrow keys move it one cell at a time (and the readout is a polite live region while you do), and Escape puts the lens away. Moving the pointer takes over again.

What happens with reduced motion?

The lens follows the pointer exactly, with no easing, since it is a direct response to the pointer. Jumps from the arrow keys ease only without a reduced-motion preference. The entrance fade is off.

What replaces the lens on a phone?

The lens is hidden and the table drops its two quietest columns. Tapping a cell pins the readout to it and marks the cell, so the same information is a tap away.

Why is the table always left to right?

It is a table of routes and numbers, drawn as the product would show it, so the figure keeps left-to-right order in a right-to-left page, as a code sample would. The header, the readout's key hints and the rest of the page mirror as usual.

All 170 features blocks