Custom Toolbar

PreviousNext

Build a custom toolbar for the designer.

Compose your components inside the DesignerToolbar component to create a custom toolbar.

  • Use the DesignerToolbarGroup component to group your components and DesignerToolbarSeparator to add a separator between your components.
  • For toolbar buttons, use the DesignerToolbarButton component.
components/custom-toolbar.tsx
import {
  ActionToolbarZoom,
  DesignerToolbar,
  DesignerToolbarButton,
  DesignerToolbarGroup,
  DesignerToolbarSeparator,
  createLayerCssVarAction,
  useLayerCssVarAction,
} from "@shadcn/designer"
import { IconCheck } from "@tabler/icons-react"
 
const backgroundColorAction = createLayerCssVarAction(
  "--background-color",
  "#3b82f6"
)
 
export function CustomToolbar() {
  const [backgroundColor, setBackgroundColor] = useLayerCssVarAction(
    backgroundColorAction
  )
 
  return (
    <DesignerToolbarGroup className="gap-1">
      {["#3b82f6", "#ef4444", "#22c55e", "#f59e0b", "#8b5cf6"].map(
        (color) => (
          <DesignerToolbarButton
            data-active={backgroundColor === color}
            key={color}
            onClick={() => setBackgroundColor(color)}
            className="rounded-md bg-(--color) hover:bg-(--color) data-[active=true]:*:[svg]:opacity-100"
            tooltip={color}
            style={
              {
                "--color": color,
              } as React.CSSProperties
            }
          >
            <span className="sr-only">{color}</span>
            <IconCheck className="text-white opacity-0" />
          </DesignerToolbarButton>
        )
      )}
    </DesignerToolbarGroup>
    <DesignerToolbarSeparator />
    <DesignerToolbarGroup>
      <ActionToolbarZoom />
    </DesignerToolbarGroup>
  </DesignerToolbar>
  )
}
ToolbarBlob Editor