Benchmarks

The fixtures come from React Grab Bench. Our direct source checks live in the Next Inspect UI benchmark repository (private), a fork of that bench with Next Inspect UI wired in.

Next Inspect UI source lookup benchmark
Definition files	In component tree	Median	p95
305/330	311/330	1.3 ms	3.8 ms

Direct definition-file lookup across 330 fixtures, with 6 missing targets and 0 lookup errors. Timing includes source lookup and component context, not editor launch time. Numbers are copied from the private benchmark repo after a run there.

More patterns in the benchmark

Higher-order components and render adapters
Aliased imports and re-exported components
Styled components and polymorphic hosts
Deeply nested compound components

In addition to the benchmark patterns, Next Inspect UI works especially well with shadcn, Base UI, Motion, and SVG.

shadcn

Button, variants, and a Button nested in Card.

Nested

<Button>Send code</Button>
<Button variant="secondary">Secondary</Button>

<Card>
  <CardHeader>
    <CardTitle>Nested</CardTitle>
  </CardHeader>
  <CardContent>
    <Button variant="outline">Inside a card</Button>
  </CardContent>
</Card>

Base UI

useRender hosts like Badge, and nested compound children: Root with Trigger and Panel.

DefaultSecondary

Nested children still resolve.

<Badge>Default</Badge>

<Collapsible>
  <CollapsibleTrigger>Details</CollapsibleTrigger>
  <CollapsibleContent>
    Nested children still resolve.
  </CollapsibleContent>
</Collapsible>

Motion

motion.div as a return root, nested motion.div, and motion.rect.

<motion.div initial={{ opacity: 0.4 }} animate={{ opacity: 1 }} />

<svg>
  {[0, 1, 2, 3].map((index) => (
    <motion.rect key={index} x={index * 34} y={4} width={28} height={28} />
  ))}
</svg>

SVG

svg and nested hosts like rect.

<svg width={140} height={40} role="img" aria-label="plain bar">
  <rect x={4} y={4} width={28} height={28} rx={6} />
</svg>

Library host

DOM built with createElement instead of JSX the caller wrote.

createElement("svg", { width: 100, height: 36 },
  [0, 1, 2].map((index) =>
    createElement("rect", { key: index, x: index * 34, y: 4 })
  )
)

Radix Slot

asChild merges onto the child host instead of rendering its own.

Slot renders this anchor

const Clickable = ({ asChild, children, ...props }) => {
  const Comp = asChild ? Slot : "button"
  return <Comp {...props}>{children}</Comp>
}

<Clickable>Renders its own button</Clickable>
<Clickable asChild>
  <a href="#slot">Slot renders this anchor</a>
</Clickable>

forwardRef, memo, compound

Different fiber shapes: forwardRef, memo, and Panel.Header.

memo

Header

Body

const ForwardedInput = forwardRef(function ForwardedInput(props, ref) {
  return <input ref={ref} {...props} />
})

const MemoPill = memo(function MemoPill({ label }) {
  return <span>{label}</span>
})

<Panel>
  <Panel.Header>Header</Panel.Header>
  <Panel.Body>Body</Panel.Body>
</Panel>

Mapped lists

Elements created in .map() still open the authoring file.

alphabetagamma

{["alpha", "beta", "gamma"].map((item) => (
  <span key={item}>{item}</span>
))}

Icons

Third-party SVG such as Lucide. Climb goes to this call site, not node_modules.

<SparklesIcon />
<CircleIcon />
<ArrowRightIcon />

Server Component

Find the source of HTML rendered by a React Server Component.

Direct

Rendered on the server. Hover should resolve into this file.

export const ServerCard = ({ title }) => (
  <div>
    <h3>{title}</h3>
    <p>Rendered on the server.</p>
  </div>
)