Panel
Docked or floating draggable panel.
Loading…
Docked or floating draggable panel.
Loading…
Control surface docked to an edge or floating over the canvas. Use floating for overlay tools that shouldn't block the preview.
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "docked" | "floating" | docked | Docked column or draggable overlay. |
| title | string | — | Panel header title. |
| width | number | 220 | Panel width in px. |
| collapsible | boolean | true | Show collapse control. |
| defaultPosition | { x, y } | — | Initial position when floating. |
| children | ReactNode | — | Panel content. |
| className | string | — | Optional CSS class. |
Also copy lib/utils.ts (cn helper):