---
name: SidePanel
menu: General
route: components/sidePanel
---

import { Playground, Props } from 'docz';
import { SidePanel } from '@ohif/ui';

# SidePanel

## Import

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

## Basic usage

<Playground>
  <div
    className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
    style={{ height: '500px' }}
  >
    <SidePanel
      side="left"
      iconName="group-layers"
      iconLabel="Studies"
      componentLabel="Studies"
      defaultIsOpen={false}
    >
      <div className="flex justify-center text-white p-2">panel content</div>
    </SidePanel>
    <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
      CONTENT
    </div>
  </div>
</Playground>

## Properties

<Props of={SidePanel} />
