Update Guide

PreviousNext

How to update shadcn/designer to the latest version.

Upgrade to 2.0

Version 2.0 adds typed layer utilities, group layers, and new setters for layer values and meta.

Follow the steps below to update to 2.0.0.

Update package.json to 2.0.0

In your package.json file, update the registry URL to version=2.0.0:

package.json
{
  "name": "my-designer",
  "dependencies": {
    "@shadcn/designer": "https://ds.shadcn.com/registry?version=2.0.0&license=YOUR_LICENSE_KEY"
  }
}

Then run pnpm install to pull version 2.0.0 from the registry.

Use createLayerType

Custom layer definitions should now use createLayerType.

src/layers/shape.tsx
import { createLayerType } from "@shadcn/designer"
 
export const shapeLayer = createLayerType({
  type: "shape",
  name: "Shape",
  defaultValues: {
    name: "Shape",
    value: { type: "square" },
    cssVars: {
      "--width": "100px",
      "--height": "100px",
      "--background-color": "#000000",
    },
  },
  render: (layer) => {
    return <div style={layer.contentStyle} />
  },
})

Keep your layer types in an inferred array. Do not annotate the array as LayerType[].

src/layers/index.ts
import { DEFAULT_LAYER_TYPES } from "@shadcn/designer"
import { shapeLayer } from "./shape"
 
export const layerTypes = [...DEFAULT_LAYER_TYPES, shapeLayer]

Register the array for type-safe Layer, showForLayerTypes, and layer setter usage:

src/designer.d.ts
import type { InferLayerTypes } from "@shadcn/designer"
import type { layerTypes } from "./layers"
 
declare module "@shadcn/designer" {
  interface DesignerLayerTypes extends InferLayerTypes<typeof layerTypes> {}
}

Review group layers

DEFAULT_LAYER_TYPES now includes a built-in group layer type. Groups use parentId to store nested layers:

type Layer = {
  id: string
  type: string
  parentId?: string
}

2.0 adds:

  • GROUP_LAYERS and UNGROUP_LAYERS actions.
  • Ctrl/Cmd + G to group selected layers.
  • Ctrl/Cmd + Shift + G to ungroup.
  • Nested layer rendering and drag-and-drop parenting in <PaneLayerTree>.
  • Layout controls for display, direction, alignment, wrapping, and gap.

New actions are available for working with groups:

import { ActionLayoutWrap, ActionLayoutAlign, ActionLayoutDirection, ActionLayoutDisplay, ActionLayoutGap, ActionLayoutJustify, ActionLayoutPadding } from "@shadcn/designer"

Replace value and meta writes

Use the new useSetLayersValue and useSetLayersMeta hooks to set layer values and meta. Keep useSetLayersProperty for shared fields such as name and isLocked.

Before
import { useSetLayersProperty } from "@shadcn/designer"
 
const setLayersProperty = useSetLayersProperty()
 
setLayersProperty(selectedLayerIds, "value", { type: "circle" })
After
import { useSetLayersValue } from "@shadcn/designer"
 
const setLayersValue = useSetLayersValue()
 
setLayersValue<"shape">(selectedLayerIds, { type: "circle" })

Use useSetLayersMeta for layer.meta:

Before
import { useSetLayersProperty } from "@shadcn/designer"
 
const setLayersProperty = useSetLayersProperty()
 
setLayersProperty(selectedLayerIds, "meta", { approved: true })
After
import { useSetLayersMeta } from "@shadcn/designer"
 
const setLayersMeta = useSetLayersMeta()
 
setLayersMeta<"card">(selectedLayerIds, { approved: true })

When you only have IDs, pass the layer type as a generic:

setLayersValue<"shape">(selectedLayerIds, { type: "square" })
setLayersMeta<"card">(selectedLayerIds, { approved: true })

2.0 checklist

  • Update the registry URL version and run pnpm install.
  • Convert custom layer definitions to createLayerType.
  • Register custom layer types with InferLayerTypes.
  • Preserve and handle parentId in custom layer-list logic.
  • Replace value writes with useSetLayersValue.
  • Replace meta writes with useSetLayersMeta.

Update to the latest minor version

In your package.json file, update the version={PACKAGE_VERSION} to the latest version. The latest version is 2.0.1.

package.json
{
  "name": "my-designer",
  "dependencies": {
    "@shadcn/designer": "https://ds.shadcn.com/registry?version=PACKAGE_VERSION&license=YOUR_LICENSE_KEY"
  }
}

Then run pnpm install to pull the latest version from the registry.

InstallationDesigner