This example demonstrates a print-ready editor with support for standard paper sizes, orientations, DPI settings, and PDF export functionality.

> **Try it out:** Select a paper size and orientation, add text and images, then download your design as a high-quality PDF. Use the unit selector to work in pixels, millimeters, centimeters, inches, or points.

## Overview

The Print & PDF example showcases how to build a print-ready design editor with:

- Standard paper sizes (A4, A3, Letter, Legal, Tabloid)
- Portrait and landscape orientations
- DPI selection for print quality (96, 150, 300, 600 DPI)
- Multiple unit systems (px, mm, cm, in, pt)
- PDF export functionality
- Print-optimized canvas bounds

## Components

The editor uses a tabbed interface with two main sections:

- **Style Tab** - Layer styling controls for position, size, colors, typography, and more
- **Document Tab** - Paper size and orientation settings

This shows how to use your own custom components inside the designer to build advanced designer panels and toolbars.

```tsx
import {
  Designer,
  DesignerCanvas,
  DesignerContent,
  DesignerFrame,
  DesignerPanel,
  DesignerToolbar,
  useSetFrameSize,
  useDPI,
  useSetDPI,
  useUnitSystem,
  useSetUnitSystem,
} from "@shadcn/designer"

function PrintEditor() {
  return (
    <Designer frameSize={{ width: 2480, height: 3508 }} dpi={300}>
      <DesignerContent>
        <DesignerPanel className="invisible" />
        <DesignerCanvas>
          <DesignerFrame
            bounds={{
              left: 64,
              top: 64,
              right: 64,
              bottom: 64,
              position: "css",
            }}
            showBounds
          />
        </DesignerCanvas>
        <DesignerPanel>
          {/* Style and document controls */}
        </DesignerPanel>
      </DesignerContent>
      <DesignerToolbar>
        {/* Toolbar with unit, DPI, and export controls */}
      </DesignerToolbar>
    </Designer>
  )
}
```

## Unit System

The example supports multiple unit systems for precise print design.

For a detailed guide on working with unit systems, see the [Unit System](/docs/examples/unit-system) example.
```tsx
import { useUnitSystem, useSetUnitSystem } from "@shadcn/designer"

function UnitSelector() {
  const unitSystem = useUnitSystem()
  const setUnitSystem = useSetUnitSystem()

  return (
    <Select value={unitSystem} onValueChange={setUnitSystem}>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="px">Pixels (px)</SelectItem>
        <SelectItem value="mm">Millimeters (mm)</SelectItem>
        <SelectItem value="cm">Centimeters (cm)</SelectItem>
        <SelectItem value="in">Inches (in)</SelectItem>
        <SelectItem value="pt">Points (pt)</SelectItem>
      </SelectContent>
    </Select>
  )
}
```

## DPI Settings

Control the resolution of your print design with DPI selection:

```tsx
import { useDPI, useSetDPI } from "@shadcn/designer"

function DPISelector() {
  const dpi = useDPI()
  const setDPI = useSetDPI()

  return (
    <Select value={String(dpi)} onValueChange={(v) => setDPI(Number(v))}>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="96">96 DPI</SelectItem>
        <SelectItem value="150">150 DPI</SelectItem>
        <SelectItem value="300">300 DPI</SelectItem>
        <SelectItem value="600">600 DPI</SelectItem>
      </SelectContent>
    </Select>
  )
}
```

## Print Bounds

The example uses `bounds` prop to define safe print margins:

```tsx
<DesignerFrame
  bounds={{
    left: 64,
    top: 64,
    right: 64,
    bottom: 64,
    position: "css",
  }}
  showBounds
/>
```

This ensures content stays within printable areas by showing visual guides at the specified margins.

## PDF Export

To export to PDF, we use the [`DesignerStaticFrame`](/docs/reference/designer#designerstaticframe) component to render a static, [read-only version](/docs/examples/read-only) of the layers. 

Then we use the [`mql`](https://microlink.io/) package to generate a PDF of the static frame.