---
title: Componentes
description: Referencia de los componentes sin estilos de @open-pencil/vue.
---

# Componentes

`@open-pencil/vue` proporciona componentes sin estilos para el lienzo, la navegación, los paneles de propiedades y campos especializados.

## Lienzo

- [CanvasRoot](./canvas-root) — contexto del lienzo.
- [CanvasSurface](./canvas-surface) — superficie de renderizado.

## Navegación

- [PageListRoot](./page-list-root) — páginas y sus acciones.
- [LayerTreeRoot](./layer-tree-root) — árbol de capas.
- [LayerTreeItem](./layer-tree-item) — fila del árbol.
- [ToolbarRoot](./toolbar-root) — estado y acciones de la barra de herramientas.
- [ToolbarItem](./toolbar-item) — herramienta individual.

## Paneles de propiedades

- [PropertyListRoot](./property-list-root) — lista controlada de propiedades.
- [PropertyListItem](./property-list-item) — relleno, contorno o efecto.
- [PositionControlsRoot](./position-controls-root) — posición, tamaño y transformación.
- [LayoutControlsRoot](./layout-controls-root) — disposición automática.
- [AppearanceControlsRoot](./appearance-controls-root) — opacidad, visibilidad y esquinas.
- [TypographyControlsRoot](./typography-controls-root) — fuente, alineación y formato.

## Color, degradados y fuentes

- [ColorInputRoot](./color-input-root) — entrada de color.
- [ColorPickerRoot](./color-picker-root) — selector de color.
- [GradientEditorRoot](./gradient-editor-root) — edición de degradados.
- [GradientEditorBar](./gradient-editor-bar) — barra del degradado.
- [GradientEditorStop](./gradient-editor-stop) — punto del degradado.
- [FontPickerRoot](./font-picker-root) — selector de fuentes.