You can use the `Toolbar` component to add a toolbar to the designer.

A toolbar is a container for toolbar buttons such as add layer, zoom, etc. You can group buttons together using the `DesignerToolbarGroup` component.

```tsx
import {
  ActionToolbarAddLayer,
  Designer,
  DesignerCanvas,
  DesignerContent,
  DesignerFrame,
  DesignerToolbar,
  DesignerToolbarButton,
  DesignerToolbarGroup,
  DesignerToolbarSeparator,
} from "@shadcn/designer"
import { IconPlus } from "@tabler/icons-react"
import { toast } from "sonner"

function CustomDesigner() {
  return (
    <Designer>
      <DesignerContent>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
      </DesignerContent>
      <DesignerToolbar>
        <DesignerToolbarGroup>
          <ActionToolbarAddLayer />
        </DesignerToolbarGroup>
        <DesignerToolbarSeparator />
        <DesignerToolbarGroup>
          <DesignerToolbarButton
            tooltip="Custom Button"
            variant="default"
            onClick={() => toast("Custom Button Clicked")}
          >
            <IconPlus /> Button
          </DesignerToolbarButton>
        </DesignerToolbarGroup>
      </DesignerToolbar>
    </Designer>
  )
}
```

## Toolbar Components

Use `DesignerToolbarGroup` to group toolbar buttons and `DesignerToolbarSeparator` to add a separator between groups.

```tsx
import { DesignerToolbarGroup, DesignerToolbarSeparator } from "@shadcn/designer"

function CustomToolbar() {
  return (
    <DesignerToolbar>
      <DesignerToolbarGroup>
        <DesignerToolbarButton />
        <DesignerToolbarButton />
      </DesignerToolbarGroup>
      <DesignerToolbarSeparator />
      <DesignerToolbarGroup>
        <DesignerToolbarButton />
      </DesignerToolbarGroup>
    </DesignerToolbar>
  )
}
```

You can use `DesignerToolbarButton` to add a button to the toolbar.

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

function CustomToolbarButton() {
  return (
    <DesignerToolbarButton tooltip="Custom Button" onClick={() => toast("Custom Button Clicked")}>
      <IconPlus />
    </DesignerToolbarButton>
  )
}
```