> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Page annotations (Tags, Arrows, Areas)

> Customize Velt page annotations, tags, arrows, and areas with supported components and slots.

The three on-page annotation features. **Up front: these have a *thin* customization surface**; they have **not** been migrated to the wireframe-slot system, so there are **no wireframe slots** and **no `velt-if`/`velt-class`/`velt-data` tokens** for them. Customize with **CSS + props** (and, for Tags, a `[template]` input + headless hooks).

## Components

**Full examples:** the per-component pages cover what *is* customizable in detail: Arrows [parts](https://velt.dev/docs/ui-customization/features/async/arrows/parts.md), [slots](https://velt.dev/docs/ui-customization/features/async/arrows/slots.md), [custom button](https://velt.dev/docs/ui-customization/features/async/arrows/custom-button.md), and [wireframe variables](https://velt.dev/docs/ui-customization/features/async/arrows/wireframe-variables.md); [Area wireframe variables](https://velt.dev/docs/ui-customization/features/async/area/wireframe-variables.md); and [Tag wireframe variables](https://velt.dev/docs/ui-customization/features/async/tag/wireframe-variables.md).

| | Primitive | Wireframe |
| - | - | - |
| **Tags** | `VeltTags`, `VeltTagTool` | none (not migrated to wireframe slots) |
| **Arrows** | `VeltArrows`, `VeltArrowTool` | none |
| **Areas** | *(no `Velt*` React wrapper: `velt-areas` / `velt-area-tool` custom elements only)* | none (one internal portal stub only) |

> Tags also expose internal elements `<velt-tag-pin>` / `<velt-tag-dialog>` that accept a **`[template]`** input for custom rendering.

## Config props

| Feature | Props |
| - | - |
| Tags | `VeltTags`: `pinHighlighterClass` · `VeltTagTool`: `targetTagElementId` · `<velt-tag-pin>` / `<velt-tag-dialog>` accept a **`[template]`** input for custom rendering |
| Arrows | `VeltArrows`: untyped props · `VeltArrowTool`: `darkMode` |
| Areas | No dedicated React component: driven by config + the `velt-areas` / `velt-area-tool` custom elements. Default area color `#625DF5` |

## CSS: stateful classes

None beyond host-element theming: these features have **no built-in stateful-class table**. Target the tag / arrow / area host (and pin) elements directly and theme via `--velt-*` (override with `!important` because Velt's own styles are high-specificity; see [CSS](https://velt.dev/docs/ui-customization/styling.md#override-classes)). The default area color is `#625DF5`.

## Wireframes: slot trees + tokens

Not wireframeable: none of Tags / Arrows / Areas have been migrated to the wireframe-slot system, so there are **no slots** and **no `velt-if`/`velt-class`/`velt-data` tokens** (Areas has only one internal portal stub). For Arrows a flat `componentConfig.arrowPinAnnotation`/`user`/… exists internally but is **not** interpolation-live, so you can't read it in markup yet. Customize via CSS + props (+ hooks for Tags).

## Headless hooks

| Feature | Hooks |
| - | - |
| Tags (the main lever) | `useTagAnnotations(documentId?, location?)` → `TagAnnotation[] \| null` · `useTagUtils()` → the tag element. With these you can render tags entirely your own way (headless) |
| Arrows · Areas | None: customize via CSS + props only |

## Limitations

At a glance: what each sub-feature supports:

| | Wireframe slots | `{…}` tokens | Headless hooks | React primitive | Customize with |
| - | - | - | - | - | - |
| **Tags** | ❌ none | ❌ | ✅ `useTagAnnotations`, `useTagUtils` | `VeltTags`, `VeltTagTool` | CSS, props, `[template]`, hooks |
| **Arrows** | ❌ none | ❌ | ❌ none | `VeltArrows`, `VeltArrowTool` | CSS, `darkMode` prop |
| **Areas** | ❌ none (one internal stub) | ❌ | ❌ none | *(no `Velt*` React wrapper: `velt-areas` / `velt-area-tool` elements only)* | CSS, area color |

Because there are no slots or hooks (beyond Tags), the right move when a design needs deep customization of arrows/areas is usually a **headless-style approach for Tags** (render from `useTagAnnotations`), or accept the default UI + CSS for arrows/areas. Don't hack Velt's internal arrow/area DOM to force a layout it doesn't support: internal DOM can change in any release, so stick to documented classes and treat everything else as unsupported. Use CSS for what's reachable and leave a comment for the rest.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.