Code minimap
Syntax-coloured pixel minimap beside a code view with the visible window outlined; search hits pulse in the margin and dragging scrolls.
Installation
pnpm dlx shadcn@latest add @lumesec/px-minimapFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-minimap.jsonUsage
import { PxMinimap } from "@/components/lumesec/px-minimap";
export function Example() {
return (
<PxMinimap />
);
}Behaviour
A syntax-coloured pixel minimap beside a code file, with the visible window outlined. Search results pulse in the margin; drag the minimap to scroll.
API reference
Methods
Call them on the element, for example through a React ref.
find(query: string)Highlights every line containing query (case-insensitive) and marks it in the minimap.
next()Scrolls to the next match, wrapping around.
Keyboard
| Keys | Action |
|---|---|
| Enter (in the search box) | Jump to the next match. |
Accessibility
- The search field is a
type="search"input witharia-label="Find in file"; the match count is anaria-live="polite"region. - The code view is focusable (
tabindex="0") witharia-label="Sample code", so it can be scrolled with the keyboard. - The minimap canvas is a pointer shortcut and is hidden from assistive technology (
aria-hidden); the code view itself is focusable and scrolls with the keyboard. - Reduced motion: jumps scroll instantly instead of smoothly and the match markers stop pulsing.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --border, --card, --foreground, --lumesec, --lumesec-success, --lumesec-warning, --muted and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-fg, --ui-mono, --ui-muted, --ui-ok, --ui-surface, --ui-track and --ui-warn.
Notes
- The code is 140 lines of generated sample JavaScript; there is no attribute for your own source. The search box starts with
flush. - The code view and minimap are 220px tall; the minimap is 66px wide.
Related
Was this page helpful?