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

# Reactions

> Customize Velt inline reactions with props, classes, wireframes, hooks, and known limitations.

Emoji reactions: the add-reaction tool, the emoji picker panel, reaction pins (with a hover tooltip listing who reacted), and an inline reactions section. **Wireframed** + custom emoji sets.

## Components

|                          | Primitive                         | Wireframe                                                            |
| ------------------------ | --------------------------------- | -------------------------------------------------------------------- |
| Add-reaction tool        | `VeltReactionTool`                | `VeltReactionToolWireframe` (leaf: picker opens as a separate panel) |
| Emoji picker             | None                              | `VeltReactionsPanelWireframe`                                        |
| Reaction pin             | *(no standalone React primitive)* | `VeltReactionPinWireframe`                                           |
| Pin hover tooltip        | None                              | `VeltReactionPinTooltipWireframe`                                    |
| Inline reactions section | `VeltInlineReactionsSection`      | `VeltInlineReactionsSectionWireframe`                                |

> There is **no `VeltReactionPin` React primitive**: customize pins only via `VeltReactionPinWireframe` / CSS. Reaction data/actions live on the **comment element**, so there's no `useReactionUtils` (see hooks).

## Config props

No general config props beyond the custom emoji set. Replace the default reactions with your own via the `customReactions` prop (`ReactionMap` = `{ [reactionId]: { url?, svg?, emoji? } }`):

```tsx theme={null}
<VeltInlineReactionsSection customReactions={{ "love": { emoji: "❤️" }, "ship": { svg: "<svg…>" } }} />
// or globally:  client.getReactionElement().setCustomReactions(map)   // also commentElement.setCustomReactions
```

(Malformed `customReactions` JSON silently no-ops.)

## CSS: stateful classes

(Override with `!important`, R9b.)

* **`velt-reaction-pin--no-reactions`**: pin has **0 reactions** (the key class for "show the tool when empty vs the panel when populated").
* `active` on the pin: current user has reacted (`isReactionSelectedByCurrentUser`).
* `action-btn.active` on the tool: picker open.
* `velt-reactions-panel--default` / `.dark`: panel default / dark mode.
* Timeline variant: `s-emoji-block_timeline`, `s-emoji-block__item.active`.

## Wireframes: slot trees + tokens

```
VeltReactionsPanelWireframe → .Items → .Item → .Emoji          (per-item: {emoji.value} {emoji.name} {emoji.key}, {isSelected})
VeltReactionPinWireframe    → .Emoji  .Count
VeltReactionPinTooltipWireframe → .Users → .User → .Avatar / .Name   (per-user: {reaction.from.name/.email/.photoUrl})
VeltInlineReactionsSectionWireframe → .ToolContainer  .Panel  .List
```

Reactions are **flat-config**: read tokens as `{componentConfig.<x>}`: pin `{componentConfig.isReactionSelectedByCurrentUser}` 🔑, `{componentConfig.tooltipVisible}` 🔑, `{componentConfig.annotation.reactions.length}`, `{componentConfig.type}` (`'comment'|'inline'|'timeline'|'standalone'`); inline section `{componentConfig.skeletonLoading}` 🔑, `{componentConfig.annotations.length}`. `type="standalone"` renders even at 0 reactions; `type="timeline"` is the compact variant.

## Headless hooks

Reactions are actions on the comment element: use:

* `useAddReaction()` → `{ addReaction }`, `useToggleReaction()` → `{ toggleReaction }`, `useDeleteReaction()` → `{ deleteReaction }`.

(No `useReactionUtils`; for custom emoji config call `setCustomReactions` on the reaction/comment element.)

## Limitations

No standalone reaction-pin primitive (wireframe/CSS only). Two distinct emoji fields: picker items use `emoji.value`/`.key`; pins render `annotation.icon`. `shadowDom` defaults differ (inline section `true`, pin/tool `false`).