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`](/docs/reference/ui#action) component for more information on how to build your own actions.

## Layout & Positioning

### ActionSize

Controls for layer width and height.

```tsx
import { ActionSize } from "@shadcn/designer"

function SizeControls() {
  return <ActionSize />
}
```

### ActionPosition

Controls for layer X and Y position.

```tsx
import { ActionPosition } from "@shadcn/designer"

function PositionControls() {
  return <ActionPosition />
}
```

### ActionRotate

Control for layer rotation.

```tsx
import { ActionRotate } from "@shadcn/designer"

function RotationControl() {
  return <ActionRotate />
}
```

### ActionDirection

Control for flex direction property.

```tsx
import { ActionDirection } from "@shadcn/designer"

function DirectionControl() {
  return <ActionDirection />
}
```

### ActionAlignItems

Controls for flex alignment properties.

```tsx
import { ActionAlignItems } from "@shadcn/designer"

function AlignmentControls() {
  return <ActionAlignItems />
}
```

### ActionPadding

Controls for layer padding.

```tsx
import { ActionPadding } from "@shadcn/designer"

function PaddingControls() {
  return <ActionPadding />
}
```

## Visual Styling

### ActionFill

Background color and fill controls.

```tsx
import { ActionFill } from "@shadcn/designer"

function FillControls() {
  return <ActionFill />
}
```

### ActionColor

Text color controls.

```tsx
import { ActionColor } from "@shadcn/designer"

function ColorControls() {
  return <ActionColor />
}
```

### ActionCorner

Border radius controls.

```tsx
import { ActionCorner } from "@shadcn/designer"

function CornerControls() {
  return <ActionCorner />
}
```

### ActionBorder

Border style and width controls.

```tsx
import { ActionBorder } from "@shadcn/designer"

function BorderControls() {
  return <ActionBorder />
}
```

### ActionBoxShadow

Box shadow controls.

```tsx
import { ActionBoxShadow } from "@shadcn/designer"

function ShadowControls() {
  return <ActionBoxShadow />
}
```

## Typography

### ActionFont

Font family picker with API integration.

```tsx
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.

```tsx
import { ActionFontSize } from "@shadcn/designer"

function FontSizeControl() {
  return <ActionFontSize />
}
```

### ActionFontStyle

Font weight and style controls.

```tsx
import { ActionFontStyle } from "@shadcn/designer"

function FontStyleControls() {
  return <ActionFontStyle />
}
```

### ActionLineHeight

Line height control.

```tsx
import { ActionLineHeight } from "@shadcn/designer"

function LineHeightControl() {
  return <ActionLineHeight />
}
```

### ActionLetterSpacing

Letter spacing control.

```tsx
import { ActionLetterSpacing } from "@shadcn/designer"

function LetterSpacingControl() {
  return <ActionLetterSpacing />
}
```

### ActionTextAlign

Text alignment controls.

```tsx
import { ActionTextAlign } from "@shadcn/designer"

function TextAlignControls() {
  return <ActionTextAlign />
}
```

### ActionTextDecoration

Text decoration controls (underline, strikethrough).

```tsx
import { ActionTextDecoration } from "@shadcn/designer"

function TextDecorationControls() {
  return <ActionTextDecoration />
}
```

### ActionTextTransform

Text case transformation controls.

```tsx
import { ActionTextTransform } from "@shadcn/designer"

function TextTransformControls() {
  return <ActionTextTransform />
}
```

### ActionTextShadow

Text shadow controls.

```tsx
import { ActionTextShadow } from "@shadcn/designer"

function TextShadowControls() {
  return <ActionTextShadow />
}
```

### ActionTextStroke

Text stroke/outline controls.

```tsx
import { ActionTextStroke } from "@shadcn/designer"

function TextStrokeControls() {
  return <ActionTextStroke />
}
```

### ActionTextValue

Text content editor.

```tsx
import { ActionTextValue } from "@shadcn/designer"

function TextEditor() {
  return <ActionTextValue />
}
```

## Image Controls

### ActionImage

Configurable image plugin container.

```tsx
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.

```tsx
import { ActionImageBrowser } from "@shadcn/designer"

function ImageBrowser() {
  return <ActionImageBrowser apiUrl="https://api.example.com/images" />
}
```

### ActionImageCropper

Image cropping tool.

```tsx
import { ActionImageCropper } from "@shadcn/designer"

function ImageCropper() {
  return <ActionImageCropper />
}
```

### ActionImageUrl

URL-based image input.

```tsx
import { ActionImageUrl } from "@shadcn/designer"

function ImageUrlInput() {
  return <ActionImageUrl />
}
```

### ActionImageFit

Image fit and sizing controls.

```tsx
import { ActionImageFit } from "@shadcn/designer"

function ImageFitControls() {
  return <ActionImageFit />
}
```

### ActionImageFilter

Image filter controls.

```tsx
import { ActionImageFilter } from "@shadcn/designer"

function ImageFilterControls() {
  return <ActionImageFilter />
}
```