<Panel />

<Panel />

Source on GitHub (opens in a new tab)

The <Panel /> component helps you position content above the viewport. It is used internally by the <MiniMap /> and <Controls /> components.

import ReactFlow, { Background, Panel } from 'reactflow';
export default function Flow() {
  return (
    <ReactFlow nodes={[...]} fitView>
      <Panel position="top-left">top-left</Panel>
      <Panel position="top-center">top-center</Panel>
      <Panel position="top-right">top-right</Panel>
      <Panel position="bottom-left">bottom-left</Panel>
      <Panel position="bottom-center">bottom-center</Panel>
      <Panel position="bottom-right">bottom-right</Panel>


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


Additionally, the <Panel /> component accepts all props of the HTML <div /> element.