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

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

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