You can add your own custom layer types to the designer. The following example shows how to add a custom `logo` layer type.
The `logo` layer type has a `value` property that can be used to store the logo name and a `render` function that can be used to render the logo.
> **Try it out:** Click on the logo to select it and pick a different one using the logo picker. You can also change the fill color of the logo using the fill action.
## Layer Type
Start by defining the layer type.
```tsx
import { type LayerType } from "@shadcn/designer"
// Logo data.
const LOGOS = [
{
name: "Default",
path: ``,
},
{
name: "Anthropic",
path: ``,
},
// ...
]
// Custom layer type.
const customLayerTypes = [
{
type: "logo",
name: "Logo",
defaultValues: {
name: "Logo",
value: "Default",
},
render: (layer) => {
const logo = LOGOS.find((logo) => logo.name === layer.value)
if (!logo) {
return null
}
return (
)
},
},
] satisfies LayerType[]
```
## Designer
Create the designer with a default layer. This will render a frame with a `logo` layer with the default logo.
```tsx
function CustomDesigner() {
return (
)
}
```
## ActionLogoPicker
To add a logo picker action, we can use the `
Select Logo
)
}
```
## ActionLogoFill
To control the fill color of the logo, we use `createLayerCssVarAction` to create an action that can be used to update the `fill` CSS variable.
```tsx
const DEFAULT_FILL = "#000000"
const fillAction = createLayerCssVarAction("--fill", DEFAULT_FILL)
function ActionLogoFill() {
const selectedLayers = useSelectedLayers()
const [fill, setFill] = useLayerCssVarAction(fillAction)
return (
Fill
)
}
```