These components are used to build the floating toolbar at the bottom of the designer. See also the [DesignerToolbar](/docs/reference/designer#designertoolbar) component in the [Designer](/docs/reference/designer) section.

## Toolbar Actions

### ActionToolbarAddLayer

Controls for adding new layers.

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

function CustomDesignerToolbar() {
  return (
    <DesignerToolbar>
      <DesignerToolbarGroup>
        <ActionToolbarAddLayer />
      </DesignerToolbarGroup>
    </DesignerToolbar>
  )
}
```

### ActionToolbarHistory

Undo and redo controls.

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

function CustomDesignerToolbar() {
  return (
    <DesignerToolbar>
      <DesignerToolbarGroup>
        <ActionToolbarHistory />
      </DesignerToolbarGroup>
    </DesignerToolbar>
  )
}
```

### ActionToolbarZoom

Zoom controls.

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

function CustomDesignerToolbar() {
  return (
    <DesignerToolbar>
      <DesignerToolbarGroup>
        <ActionToolbarZoom />
      </DesignerToolbarGroup>
    </DesignerToolbar>
  )
}
```