<Controls />

Source on GitHub 

The <Controls /> component renders a small panel that contains convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.

import { ReactFlow, Controls } from '@xyflow/react'
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]} edges={[...]}>
      <Controls />
    </ReactFlow>
  )
}

Props

For TypeScript users, the props type for the <Controls /> component is exported as ControlProps.

Notes

• To extend or customize the controls, you can use the <ControlButton /> component