Header

PreviousNext

Add a header to the designer.

Use the DesignerHeader component to add a header to the designer.

The header is placed at the top of the designer and can contain custom component such as your logo, a search bar or editor controls.

components/custom-designer.tsx
import {
  Designer,
  DesignerCanvas,
  DesignerContent,
  DesignerFrame,
  DesignerHeader,
} from "@shadcn/designer"
import { Button } from "@shadcn/designer/ui"
 
function CustomDesigner() {
  return (
    <Designer>
      <DesignerHeader>
        <span className="font-black text-foreground text-lg">studio</span>
        <div className="ml-auto flex items-center gap-2">
          <Button variant="outline">Button</Button>
          <Button variant="primary">Button</Button>
        </div>
      </DesignerHeader>
      <DesignerContent>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
      </DesignerContent>
    </Designer>
  )
}

Custom Header

Use the className prop to customize the header. For example, you can make it floating by adding m-4 w-auto rounded-full border-0 shadow.

components/custom-designer.tsx
function CustomDesigner() {
  return (
    <Designer>
      <DesignerHeader className="m-4 w-auto rounded-full border-0 shadow">
        <span className="font-black text-foreground text-lg">studio</span>
        <div className="ml-auto flex items-center gap-2">
          <ActionToolbarZoom />
        </div>
      </DesignerHeader>
      <DesignerContent>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
      </DesignerContent>
    </Designer>
  )
}
Basic EditorPanels