Toolbar

PreviousNext

Add a toolbar to the designer.

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.

components/custom-designer.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.

components/custom-toolbar.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.

import { DesignerToolbarButton } from "@shadcn/designer"
 
function CustomToolbarButton() {
  return (
    <DesignerToolbarButton tooltip="Custom Button" onClick={() => toast("Custom Button Clicked")}>
      <IconPlus />
    </DesignerToolbarButton>
  )
}
PanesCustom Toolbar