Customize by Feature

Find the customization entry point for every Velt feature: each feature area under Components opens with an overview page.

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.

Feature	Customization depth	Guide
Comment Dialog	Full wireframe tree + variables + primitives; the running example in the approach guides	Comment Dialog
Comments Sidebar	V1/V2 wireframes + variables + V2 primitives	Comment Sidebar
Comment Pin / Bubble / Tool	Wireframes + variables per surface	Pin · Bubble · Tool
Comment surfaces (Text / Inline / Multi-thread)	Comment variants: wireframed, reuse comment hooks	Comment surfaces
Notifications	Full wireframe + rich config props (panel mode, settings layout, tabs) + hooks	Notifications
Reactions	Wireframed (tool/panel/pin/tooltip/inline) + custom emoji sets + hooks	Reactions
Recorder & Transcription	Deepest wireframe tree (control panel/player/tools/dialogs/subtitles/transcript) + hooks	Recorder and transcription
@Mentions & Autocomplete	Custom mention data (contacts/groups/custom) + option/chip wireframes	Mentions and autocomplete
Presence & Live Cursors	Per-item wireframes (avatar list / cursor pointer) + hooks; flat-config	Presence and cursors
Activity Log	Full wireframe + data hooks	Activity Log
Tags / Arrows / Areas	Thin: CSS + props (+ Tag hooks); no wireframe slots	Annotations, tags, arrows, and areas
Huddle	Wireframe variables (flat-config) for the huddle panels and attendee tiles	Huddle wireframe variables
Live Selection	CSS classes + default-styling toggle	Live Selection
Single Editor Mode	Panel wireframe	Single Editor Mode
View Analytics	Wireframe variables for the viewers indicator	View Analytics wireframe variables
Rewriter	Wireframe variables for the AI rewriter	Rewriter wireframe variables

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.