Skip to main content
The same four-layer model (CSS · Wireframes · Primitives · Headless) and the same rules apply to every Velt feature, comments included. Each feature area below opens with an overview page at the top of its group: open the one you need. (The standard comment dialog, sidebar, pin, bubble, and comment tool are the running examples throughout the approach guides, Wireframes, CSS, and Primitives, so start there for those.)
Run the decision tree on the feature (same four questions), then jump to its page below. The core rules (no hacks against Velt’s internal DOM, one <VeltWireframe>, the interactivity rule, shadowDom/injectCustomCss) hold everywhere.

​
Where to customize each feature

Have this design in Figma? The UI Customization Plugin for Cursor and Claude Code turns a Figma design into verified Velt UI customization (comments and notifications today): it picks the approach, builds the feature UI in your app, and verifies the result against the design in a real browser.

​
Two things to remember for non-comment features

  1. Flat-config variables (what this means). Cursor, Presence, Huddle, Recording, Transcription, Reactions, Autocomplete, View, Area, Arrow, Tag read wireframe tokens as {componentConfig.<name>} (not the short aliases used by comments). See Conditional Templates.
  2. Some features are config/hooks-only. Tags/Arrows/Areas have no wireframe slots; Transcription/Subtitles are surfaced through the recorder player’s slots; Reactions actions live on the comment element. Each feature page calls out its exact limits.
Cross-cutting concerns (a11y, i18n, RTL, responsive, testing) apply to all of these: see Cross-cutting concerns.