Toolbar

PreviousNext

Components for building the floating designer toolbar.

These components are used to build the floating toolbar at the bottom of the designer. See also the DesignerToolbar component in the Designer section.

Toolbar Actions

ActionToolbarAddLayer

Controls for adding new layers.

import { ActionToolbarAddLayer, DesignerToolbar, DesignerToolbarGroup } from "@shadcn/designer"
 
function CustomDesignerToolbar() {
  return (
    <DesignerToolbar>
      <DesignerToolbarGroup>
        <ActionToolbarAddLayer />
      </DesignerToolbarGroup>
    </DesignerToolbar>
  )
}

ActionToolbarHistory

Undo and redo controls.

import { ActionToolbarHistory, DesignerToolbar, DesignerToolbarGroup } from "@shadcn/designer"
 
function CustomDesignerToolbar() {
  return (
    <DesignerToolbar>
      <DesignerToolbarGroup>
        <ActionToolbarHistory />
      </DesignerToolbarGroup>
    </DesignerToolbar>
  )
}

ActionToolbarZoom

Zoom controls.

import { ActionToolbarZoom, DesignerToolbar, DesignerToolbarGroup } from "@shadcn/designer"
 
function CustomDesignerToolbar() {
  return (
    <DesignerToolbar>
      <DesignerToolbarGroup>
        <ActionToolbarZoom />
      </DesignerToolbarGroup>
    </DesignerToolbar>
  )
}
ActionsUI