# Layout

> The desktop layout: a toolbar on top and a resizable sidebar.

```tsx
"use client";

import { ImageEditorProvider } from "photocn/react";

import { ImageEditorCanvas } from "@/components/image-editor/canvas";
import { ImageEditorCurves } from "@/components/image-editor/curves-panel";
import { ImageEditorLayout } from "@/components/image-editor/layout";
import { ImageEditorRedoButton, ImageEditorUndoButton } from "@/components/image-editor/toolbar";

export default function LayoutDemo() {
  return (
    <ImageEditorProvider src="/samples/mountain-lake.jpg">
      <ImageEditorLayout
        className="h-[520px] overflow-hidden rounded-xl border"
        sidebar={<ImageEditorCurves />}
        sidebarDefaultSize="300px"
        toolbar={
          <>
            <ImageEditorUndoButton />
            <ImageEditorRedoButton />
          </>
        }
      >
        <ImageEditorCanvas />
      </ImageEditorLayout>
    </ImageEditorProvider>
  );
}
```

## Installation

```bash
npx shadcn@latest add @photocn/image-editor-layout
```

## Usage

```tsx
import { ImageEditorLayout } from "@/components/image-editor/layout";

<ImageEditorLayout toolbar={...} sidebar={<ImageEditorCurves />}>
  <ImageEditorCanvas />

```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `toolbar` | `ReactNode` | Content of the top bar. |
| `sidebar` | `ReactNode` | Content of the sidebar. |
| `resizableSidebar` | `boolean` | Let users drag to resize the sidebar. Default `true`. |
| `sidebarDefaultSize / sidebarMinSize / sidebarMaxSize` | `string \| number` | Sidebar sizes, e.g. `"338px"`. |