# Compact Layout

> The phone layout: the photo first, tools at the bottom, and controls in a sheet.

```tsx
"use client";

import { ImageEditor } from "@/components/image-editor/image-editor";

// The full editor forced into its phone layout. It switches automatically
// whenever the editor is narrower than 640px.
export default function CompactLayoutDemo() {
  return (
    <div className="mx-auto h-[640px] max-w-[390px] overflow-hidden rounded-[2rem] border-4 border-foreground/10 shadow-sm">
      <ImageEditor className="min-h-0" layout="compact" src="/samples/strawberries.jpg" />
    </div>
  );
}
```

## Installation

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

## Usage

```tsx
// The full editor switches to this layout below 640px wide.

```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `tools` | `EditorToolbarTool[]` | The tools in the bottom bar. |
| `panels` | `Record<toolId, ReactNode>` | Replace or add panels. |
| `panelMode` | `"drawer" \| "inline"` | Where panels open. Default: a sheet on phones, below the photo on wider screens. |
| `onSave` | `(result) => Promise<void>` | Adds a Save button to the export panel. |