Panels

PreviousNext

Add left and right panels to the designer.

You can have left and right panels by placing the DesignerPanel components before and after the DesignerCanvas component.

components/custom-designer.tsx
<Designer>
  <DesignerContent>
    <DesignerPanel>Left Panel</DesignerPanel>
    <DesignerCanvas />
    <DesignerPanel>Right Panel</DesignerPanel>
  </DesignerContent>
</Designer>
components/custom-designer.tsx
import {
  Designer,
  DesignerCanvas,
  DesignerContent,
  DesignerFrame,
  DesignerPanel,
} from "@shadcn/designer"
 
export function CustomDesigner() {
  return (
    <Designer>
      <DesignerContent>
        <DesignerPanel>
          <div className="p-4 text-xs">Left Panel</div>
        </DesignerPanel>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
        <DesignerPanel>
          <div className="p-4 text-xs">Right Panel</div>
        </DesignerPanel>
      </DesignerContent>
    </Designer>
  )
}
HeaderPanes