You can add a layer tree to display the layers in the designer.

Use the built-in `PaneLayerTree` component to show the layers in the designer. You can click to select, double click to edit, and use the custom lock controls to lock the layer.

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

function CustomDesigner() {
  return (
    <Designer>
      <DesignerContent>
        <DesignerPanel>
          <DesignerPane>
            <DesignerPaneTitle>Layers</DesignerPaneTitle>
            <DesignerPaneContent>
              <PaneLayerTree />
            </DesignerPaneContent>
          </DesignerPane>
        </DesignerPanel>
      </DesignerContent>
    </Designer>
  )
}
```

## Custom Layer Tree

You can also create a custom layer tree by using the `useLayers` hook. The `useLayers` hook returns the layers in the designer.

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

function CustomLayerTree() {
  const layers = useLayers()

  return (
    <div>
      {layers.map((layer) => (
        <div key={layer.id}>{layer.name}</div>
      ))}
    </div>
  )
}
```