---
name: ViewportPane
menu: General
route: components/viewport-pane
---


import { ViewportGrid, ViewportPane, DragAndDropProvider } from '@ohif/ui';
import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';

# ViewportPane

Used to display viewports in the viewer page.

## Import

```javascript
import { ViewportPane } from '@ohif/ui';
```

## Basic usage

```jsx live
  <div className="p-4 h-56">
    <DragAndDropProvider>
      <ViewportGrid numRows={1} numCols={2}>
        <ViewportPane onDrop={() => {}} isActive={true}><h3>Hello</h3></ViewportPane>
        <ViewportPane onDrop={() => {}} isActive={false}><h3>World</h3></ViewportPane>
      </ViewportGrid>
    </DragAndDropProvider>
  </div>
```

## Properties

<ComponentPropsTable componentName={'ViewportPane'} />