You can change the size of the frame by passing `frameSize` prop to the `<Designer />` component.

```tsx
import { Designer, DesignerFrame } from "@shadcn/designer"

function CustomDesigner() {
  return (
    <Designer frameSize={{ width: 1024, height: 1024 }}>
      <DesignerFrame />
    </Designer>
  )
}
```

## useFrameSize

You can use the `useFrameSize` hook to get the current frame size.

```tsx
import { useFrameSize } from "@shadcn/designer"

function CustomDesigner() {
  const { width, height } = useFrameSize()

  return <div>Frame Size: {width}x{height}</div>
}
```

## useSetFrameSize

Use the `useSetFrameSize` hook to set the frame size. It returns a function that you can call to set the frame size.

```tsx
import { useFrameSize, useSetFrameSize, useDesignerAction, Action, ActionControls, ActionLabel } from "@shadcn/designer"

function ActionFrameSize() {
  const { width, height } = useFrameSize()
  const setFrameSize = useSetFrameSize()
  const designerAction = useDesignerAction()

  const handleFrameSizeChange = (value: string) => {
    const [width, height] = value.split("x")
    if (!width || !height) {
      return
    }

    setFrameSize({
      width: Number.parseInt(width),
      height: Number.parseInt(height),
    })
    designerAction("ZOOM_FIT")
  }

  return (
    <Action className="gap-0">
      <ActionLabel htmlFor="frame-size">Frame Size</ActionLabel>
      <ActionControls>
        <Select
          value={`${width}x${height}`}
          onValueChange={handleFrameSizeChange}
        >
          <SelectTrigger>
            <SelectValue placeholder="Select Frame Size" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="800x600">800x600</SelectItem>
            <SelectItem value="1024x1024">1024x1024</SelectItem>
            <SelectItem value="1280x720">1280x720</SelectItem>
            <SelectItem value="1080x1920">1080x1920</SelectItem>
          </SelectContent>
        </Select>
      </ActionControls>
    </Action>
  )
}
```