Reactions

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? } }):

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

Class	Applied when
`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
`s-emoji-block_timeline`, `s-emoji-block__item.active`	Timeline variant

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:

Hook	Returns
`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).

Concepts

AI Agent Workflow

Approaches

Feature Guides

Components: Async Collaboration

Components: Realtime Collaboration

Guidance

Reference

Components

Config props

CSS: stateful classes

Wireframes: slot trees + tokens

Headless hooks

Limitations

​Components

​Config props

​CSS: stateful classes

​Wireframes: slot trees + tokens

​Headless hooks

​Limitations

Components

Config props

CSS: stateful classes

Wireframes: slot trees + tokens

Headless hooks

Limitations