> ## Documentation Index > Fetch the complete documentation index at: https://velt-claude-ui-customization-docs-review-m7hwcn.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # 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`](/ui-customization/layout), [`CSS`](/ui-customization/styling), and [`Primitives`](/ui-customization/primitives), so start there for those.) > Run the [decision tree](/ui-customization/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 ``, the [interactivity rule](/ui-customization/layout#5-the-interactivity-rule-the-single-most-important-thing), `shadowDom`/`injectCustomCss`) hold everywhere. ## Where to customize each feature **Have this design in Figma?** The [UI Customization Plugin](/get-started/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`](/ui-customization/features/async/comments/comment-dialog/wireframes) | | **Comments Sidebar** | V1/V2 wireframes + variables + V2 primitives | [`Comment Sidebar`](/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components) | | **Comment Pin / Bubble / Tool** | Wireframes + variables per surface | [`Pin`](/ui-customization/features/async/comments/comment-pin/wireframes) · [`Bubble`](/ui-customization/features/async/comments/comment-bubble/wireframes) · [`Tool`](/ui-customization/features/async/comments/comment-tool) | | **Comment surfaces** (Text / Inline / Multi-thread) | Comment variants: wireframed, reuse comment hooks | [`Comment surfaces`](/ui-customization/features/comment-surfaces) | | **Notifications** | Full wireframe + rich config props (panel mode, settings layout, tabs) + hooks | [`Notifications`](/ui-customization/features/notifications) | | **Reactions** | Wireframed (tool/panel/pin/tooltip/inline) + custom emoji sets + hooks | [`Reactions`](/ui-customization/features/reactions) | | **Recorder & Transcription** | Deepest wireframe tree (control panel/player/tools/dialogs/subtitles/transcript) + hooks | [`Recorder and transcription`](/ui-customization/features/recorder-and-transcription) | | **@Mentions & Autocomplete** | Custom mention data (contacts/groups/custom) + option/chip wireframes | [`Mentions and autocomplete`](/ui-customization/features/mentions-and-autocomplete) | | **Presence & Live Cursors** | Per-item wireframes (avatar list / cursor pointer) + hooks; flat-config | [`Presence and cursors`](/ui-customization/features/presence-and-cursors) | | **Activity Log** | Full wireframe + data hooks | [`Activity Log`](/ui-customization/features/activity-log) | | **Tags / Arrows / Areas** | **Thin**: CSS + props (+ Tag hooks); no wireframe slots | [`Annotations, tags, arrows, and areas`](/ui-customization/features/annotations-tags-arrows-areas) | | **Huddle** | Wireframe variables (flat-config) for the huddle panels and attendee tiles | [`Huddle wireframe variables`](/ui-customization/features/realtime/huddle/wireframe-variables) | | **Live Selection** | CSS classes + default-styling toggle | [`Live Selection`](/ui-customization/features/realtime/live-selection) | | **Single Editor Mode** | Panel wireframe | [`Single Editor Mode`](/ui-customization/features/realtime/single-editor-mode) | | **View Analytics** | Wireframe variables for the viewers indicator | [`View Analytics wireframe variables`](/ui-customization/features/async/view-analytics/wireframe-variables) | | **Rewriter** | Wireframe variables for the AI rewriter | [`Rewriter wireframe variables`](/ui-customization/features/async/rewriter/wireframe-variables) | ## Two things to remember for non-comment features 1. **Flat-config variables** ([what this means](/ui-customization/template-variables#mapped-vs-flat-config-features-which-name-form-to-use)). Cursor, Presence, Huddle, Recording, Transcription, Reactions, Autocomplete, View, Area, Arrow, Tag read wireframe tokens as **`{componentConfig.}`** (not the short aliases used by comments). 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`](/ui-customization/localisation).