> ## Documentation Index
> Fetch the complete documentation index at: https://velt-codex-ui-customization-guide-refresh.mintlify.site/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. **Be honest 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

|            | 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

### Tags

* `VeltTags`: prop `pinHighlighterClass`.
* `VeltTagTool`: prop `targetTagElementId`.
* `<velt-tag-pin>` / `<velt-tag-dialog>` accept a **`[template]`** input for custom rendering.

### Arrows

* `VeltArrows`: untyped props.
* `VeltArrowTool`: prop `darkMode`.

### Areas

* No dedicated React component: areas are driven by config + the `velt-areas` / `velt-area-tool` custom elements. The default area color is `#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`, R9b). 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

### 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: no hooks for either; 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. Per **R0**, don't hack Velt's internal arrow/area DOM to force a layout it doesn't support: use CSS for what's reachable and leave a comment for the rest.