Compact Layout

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

"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

pnpm dlx shadcn@latest add @photocn/image-editor-compact-layout

Usage

// The full editor switches to this layout below 640px wide.
<ImageEditor src="/photo.jpg" layout="compact" />

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.