Skip to content

Side Panel

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

Installation

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

Usage

<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.

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