Actions

Property editor components for modifying layer properties.

The @shadcn/designer package ships with a set of property editor components for modifying layer properties. We call these components "actions" because they are used to modify the properties of the selected layer.

See the Action component for more information on how to build your own actions.

Layout & Positioning

ActionSize

Controls for layer width and height.

import { ActionSize } from "@shadcn/designer"
 
function SizeControls() {
  return <ActionSize />
}

ActionPosition

Controls for layer X and Y position.

import { ActionPosition } from "@shadcn/designer"
 
function PositionControls() {
  return <ActionPosition />
}

ActionRotate

Control for layer rotation.

import { ActionRotate } from "@shadcn/designer"
 
function RotationControl() {
  return <ActionRotate />
}

ActionDirection

Control for flex direction property.

import { ActionDirection } from "@shadcn/designer"
 
function DirectionControl() {
  return <ActionDirection />
}

ActionAlignItems

Controls for flex alignment properties.

import { ActionAlignItems } from "@shadcn/designer"
 
function AlignmentControls() {
  return <ActionAlignItems />
}

ActionPadding

Controls for layer padding.

import { ActionPadding } from "@shadcn/designer"
 
function PaddingControls() {
  return <ActionPadding />
}

Visual Styling

ActionFill

Background color and fill controls.

import { ActionFill } from "@shadcn/designer"
 
function FillControls() {
  return <ActionFill />
}

ActionColor

Text color controls.

import { ActionColor } from "@shadcn/designer"
 
function ColorControls() {
  return <ActionColor />
}

ActionCorner

Border radius controls.

import { ActionCorner } from "@shadcn/designer"
 
function CornerControls() {
  return <ActionCorner />
}

ActionBorder

Border style and width controls.

import { ActionBorder } from "@shadcn/designer"
 
function BorderControls() {
  return <ActionBorder />
}

ActionBoxShadow

Box shadow controls.

import { ActionBoxShadow } from "@shadcn/designer"
 
function ShadowControls() {
  return <ActionBoxShadow />
}

Typography

ActionFont

Font family picker with API integration.

import { ActionFont } from "@shadcn/designer"
 
function FontPicker() {
  return <ActionFont apiUrl="https://api.example.com/fonts" />
}

Props:

Prop	Type	Required	Description
`apiUrl`	`string`		API endpoint for font data

ActionFontSize

Font size control.

import { ActionFontSize } from "@shadcn/designer"
 
function FontSizeControl() {
  return <ActionFontSize />
}

ActionFontStyle

Font weight and style controls.

import { ActionFontStyle } from "@shadcn/designer"
 
function FontStyleControls() {
  return <ActionFontStyle />
}

ActionLineHeight

Line height control.

import { ActionLineHeight } from "@shadcn/designer"
 
function LineHeightControl() {
  return <ActionLineHeight />
}

ActionLetterSpacing

Letter spacing control.

import { ActionLetterSpacing } from "@shadcn/designer"
 
function LetterSpacingControl() {
  return <ActionLetterSpacing />
}

ActionTextAlign

Text alignment controls.

import { ActionTextAlign } from "@shadcn/designer"
 
function TextAlignControls() {
  return <ActionTextAlign />
}

ActionTextDecoration

Text decoration controls (underline, strikethrough).

import { ActionTextDecoration } from "@shadcn/designer"
 
function TextDecorationControls() {
  return <ActionTextDecoration />
}

ActionTextTransform

Text case transformation controls.

import { ActionTextTransform } from "@shadcn/designer"
 
function TextTransformControls() {
  return <ActionTextTransform />
}

ActionTextShadow

Text shadow controls.

import { ActionTextShadow } from "@shadcn/designer"
 
function TextShadowControls() {
  return <ActionTextShadow />
}

ActionTextStroke

Text stroke/outline controls.

import { ActionTextStroke } from "@shadcn/designer"
 
function TextStrokeControls() {
  return <ActionTextStroke />
}

ActionTextValue

Text content editor.

import { ActionTextValue } from "@shadcn/designer"
 
function TextEditor() {
  return <ActionTextValue />
}

Image Controls

ActionImage

Configurable image plugin container.

import { ActionImage } from "@shadcn/designer"
 
function ImageControls() {
  return (
    <ActionImage
      plugins={["browser", "cropper", "url", "fit", "filter"]}
      apiUrl="https://api.example.com/images"
    />
  )
}

Props:

Prop	Type	Required	Description
`plugins`	`string[]`	No	Array of enabled image plugins
`apiUrl`	`string`	No	API endpoint for image operations

ActionImageBrowser

Image browser with API integration.

import { ActionImageBrowser } from "@shadcn/designer"
 
function ImageBrowser() {
  return <ActionImageBrowser apiUrl="https://api.example.com/images" />
}

ActionImageCropper

Image cropping tool.

import { ActionImageCropper } from "@shadcn/designer"
 
function ImageCropper() {
  return <ActionImageCropper />
}

ActionImageUrl

URL-based image input.

import { ActionImageUrl } from "@shadcn/designer"
 
function ImageUrlInput() {
  return <ActionImageUrl />
}

ActionImageFit

Image fit and sizing controls.

import { ActionImageFit } from "@shadcn/designer"
 
function ImageFitControls() {
  return <ActionImageFit />
}

ActionImageFilter

Image filter controls.

import { ActionImageFilter } from "@shadcn/designer"
 
function ImageFilterControls() {
  return <ActionImageFilter />
}

Designer Toolbar