Element pickerPro

Pick elements on a live preview the way a design tool does: tag, name, size and padding on hover, a breadcrumb of the element tree, arrow keys to walk it, and Cmd L to attach the element to the next message.

Markdown

On this page

ProA ceramics studio booking page. Hover to see tag, size and padding, click to select, walk the tree with the arrow keys and press Cmd L to attach the element to the message.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/element-picker

Usage

tsx

import { ElementPicker } from "@/components/ui/chatcn/pro/element-picker"

<ElementPicker value={path} onValueChange={setPath} onAddToChat={attach} inChat={attachedPaths}>
  <GeneratedApp />
</ElementPicker>

Wrap the rendered app. A selection is a child index path such as 0.2.1, so it survives re-renders and serializes. Elements are named from data-builder-name, then aria-label, then the id; pass getName to map them to your source components. While picking, links and buttons in the preview do not fire.

Examples

States

ProA deep selection with a folded path, nothing selected, picking off, and disabled while the agent edits.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`	`string \| null`	Selected path; the callback also gets the `PickedElement`
`active`, `defaultActive`, `onActiveChange`	`boolean`	Picking on or off. Default on
`onAddToChat`	`(element: PickedElement) => void`	Cmd or Ctrl L, or Add to chat
`inChat`	`string[]`	Paths already attached; they wear a dashed outline
`getName`	`(element) => string \| undefined`	Friendly names for the chip and breadcrumb
`showSpacing`	`boolean`	Hatch the hovered element's padding. Default true
`breadcrumb`	`boolean`	The bar with the path and actions. Default true
`disabled`, `disabledReason`	`boolean`, `ReactNode`	For example while the agent edits the page

Keyboard

Key	Action
`ArrowUp`	Select the parent
`ArrowDown`	Select the first child
`ArrowLeft` `ArrowRight`	Previous and next sibling, mirrored in RTL
`Enter`	Select the hovered element
`Cmd L` `Ctrl L`	Add the selection to the chat
`Escape`	Clear the selection, then stop picking

Accessibility

The preview is a focusable group that names the selection and describes the keys. Every selection and every attach is announced in a polite live region with the tag, name and size.
The breadcrumb is a navigation landmark of buttons, so the tree is reachable without a pointer.
Overlays are hidden from assistive tech; the same facts are in the label and the announcement.

Motion

The hover box follows the pointer with no transition, so it never lags. The selection appears with a 120 ms scale and fade from the free preview selection.
Keyboard moves jump without animation. Reduced motion keeps the fade only.