Use the DesignerPane component inside DesignerPanel to add panes to the designer.
A DesignerPane is a container for layer actions and controls. You can stack multiple panes inside a panel.
Try it out: Click on Hello World to select the text layer then use the Font pane to edit it.
Note: To keep the example code minimal, this example is intentionally designed to be desktop only. For mobile-friendly examples, see the mobile example.
"use client"
import {
ActionColor,
ActionFontStyle,
Designer,
DesignerCanvas,
DesignerContent,
DesignerFrame,
DesignerPane,
DesignerPaneContent,
DesignerPaneTitle,
DesignerPanel,
} from "@shadcn/designer"
export function CustomDesigner() {
return (
<Designer
defaultLayers={[
{
id: "layer-1",
type: "text",
name: "Text",
value: "Hello World",
cssVars: {
"--content-font-size": "64px",
"--content-font-weight": "700",
"--content-color": "#000000",
"--width": "400px",
"--text-align": "center",
"--height": "100px",
"--translate-x": "300px",
"--translate-y": "450px",
},
},
]}
>
<DesignerContent>
<DesignerCanvas>
<DesignerFrame />
</DesignerCanvas>
<DesignerPanel>
<div className="p-4 pb-0 text-muted-foreground text-xs">
Right Panel
</div>
<DesignerPane showForLayerTypes={["text"]}>
<DesignerPaneTitle>Font</DesignerPaneTitle>
<DesignerPaneContent>
<ActionColor />
<ActionFontStyle />
</DesignerPaneContent>
</DesignerPane>
</DesignerPanel>
</DesignerContent>
</Designer>
)
}