---
title: Side Panel
description: "The resizable-mode side panel: two rows of tab stones, stone pillars and the content area."
---

<Component path="side-panel/demo" />

## Installation

```bash
npx shadcn@latest add https://osrsui.com/r/side-panel.json
```

## Usage

```tsx
<SidePanel top={TOP_TABS} bottom={BOTTOM_TABS} defaultValue="inventory">
  <SidePanelContent value="inventory">…</SidePanelContent>
</SidePanel>
```

## Any size

`width` and `height` (game pixels, default 241×335) set its size; width snaps to whole tab stones. It also takes `draggable` and `resizable`.

```tsx
<SidePanel top={TOP_TABS} width={340} height={420} resizable draggable>…</SidePanel>
```