---
title: Komponenten
description: Komponentenreferenz für headless Vue-Primitive in @open-pencil/vue.
---

# Komponenten

`@open-pencil/vue` stellt headless strukturelle Primitive für Canvas-Verdrahtung, Navigations-UI, Eigenschafts-Panels und fokussierte Eingabesteuerelemente bereit.

## Kern-Editor-Primitive

<SdkCardGroup>
  <SdkCard title="CanvasRoot" to="/programmable/sdk/api/components/canvas-root" description="Headless Canvas-Struktur und Kontext." />
  <SdkCard title="CanvasSurface" to="/programmable/sdk/api/components/canvas-surface" description="Canvas-Element-Primitiv gebunden an den CanvasRoot-Kontext." />
  <SdkCard title="LayerTreeRoot" to="/programmable/sdk/api/components/layer-tree-root" description="Headless Ebenenbaum-Primitiv." />
  <SdkCard title="LayerTreeItem" to="/programmable/sdk/api/components/layer-tree-item" description="Einzelne Ebenenbaum-Zeilen-Primitiv." />
  <SdkCard title="ToolbarRoot" to="/programmable/sdk/api/components/toolbar-root" description="Headless Toolbar-Primitiv." />
  <SdkCard title="ToolbarItem" to="/programmable/sdk/api/components/toolbar-item" description="Einzelne Toolbar-Werkzeug-Primitiv." />
  <SdkCard title="PageListRoot" to="/programmable/sdk/api/components/page-list-root" description="Headless Seitenlisten-Primitiv." />
</SdkCardGroup>

## Eigenschafts-Panel-Primitive

<SdkCardGroup>
  <SdkCard title="PropertyListRoot" to="/programmable/sdk/api/components/property-list-root" description="Headless Eigenschaftslisten-Primitiv." />
  <SdkCard title="PropertyListItem" to="/programmable/sdk/api/components/property-list-item" description="Einzelne Füllungs-, Kontur- oder Effekte-Zeilen-Primitiv." />
  <SdkCard title="PositionControlsRoot" to="/programmable/sdk/api/components/position-controls-root" description="Positions-, Größen- und Transformationssteuerelemente." />
  <SdkCard title="LayoutControlsRoot" to="/programmable/sdk/api/components/layout-controls-root" description="Auto-Layout- und Größenanpassungssteuerelemente." />
  <SdkCard title="AppearanceControlsRoot" to="/programmable/sdk/api/components/appearance-controls-root" description="Deckkraft-, Sichtbarkeits- und Eckradius-Steuerelemente." />
  <SdkCard title="TypographyControlsRoot" to="/programmable/sdk/api/components/typography-controls-root" description="Schrift-, Ausrichtungs- und Formatierungssteuerelemente." />
</SdkCardGroup>

## Picker und Eingaben

<SdkCardGroup>
  <SdkCard title="ColorPickerRoot" to="/programmable/sdk/api/components/color-picker-root" description="Popover-basiertes Farbauswahl-Primitiv." />
  <SdkCard title="ColorInputRoot" to="/programmable/sdk/api/components/color-input-root" description="Headless Farb-Eingabe-Hilfsmittel." />
  <SdkCard title="FillPickerRoot" to="/programmable/sdk/api/components/fill-picker-root" description="Popover-basiertes Füllungsauswahl-Primitiv." />
  <SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Durchsuchbares Schriftauswahl-Primitiv." />
  <SdkCard title="GradientEditorRoot" to="/programmable/sdk/api/components/gradient-editor-root" description="Wurzel-Primitiv für Verlaufsbearbeitung." />
  <SdkCard title="GradientEditorBar" to="/programmable/sdk/api/components/gradient-editor-bar" description="Ziehbare Verlaufsbalken-Primitiv." />
  <SdkCard title="GradientEditorStop" to="/programmable/sdk/api/components/gradient-editor-stop" description="Einzelne Verlaufsstopp-Primitiv." />
  <SdkCard title="NumberField" to="/programmable/sdk/api/components/number-field" description="Numeric field with scrubbing, expressions, and keyboard stepping." />
</SdkCardGroup>