> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Customize by Feature
> Find the customization entry point and depth for every Velt feature.
Every Velt feature uses the same four layers (CSS, Wireframes, Primitives, Headless) and the same rules as comments. This page indexes both **Components** sections: it tells you **how deeply each feature can be customized** and which guide to open.
Comments are the running example throughout the approach guides ([`CSS`](/docs/ui-customization/styling), [`Wireframes`](/docs/ui-customization/layout), [`Primitives`](/docs/ui-customization/primitives)), so start there for the dialog, sidebar, pin, bubble, and comment tool. For anything else, run the [decision tree](/docs/ui-customization/decision-tree) on the feature, then open its guide below.
**Have this design in Figma?** The [UI Customization Plugin](/docs/get-started/ui-customization-plugin) for Cursor and Claude Code picks the approach, builds the feature UI in your app, and verifies it against the design in a real browser (comments and notifications today).
## Async collaboration
| Feature | Customization depth | Guide |
| --------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Comment Dialog** | Full wireframe tree + variables + primitives; the running example in the approach guides | [`Comment Dialog`](/docs/ui-customization/features/async/comments/comment-dialog/overview) |
| **Comments Sidebar** | V1/V2 wireframes + variables + V2 primitives | [`Comment Sidebar`](/docs/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components) |
| **Comment Pin / Bubble / Tool** | Wireframes + variables per surface | [`Pin`](/docs/ui-customization/features/async/comments/comment-pin/wireframes) · [`Bubble`](/docs/ui-customization/features/async/comments/comment-bubble/wireframes) · [`Tool`](/docs/ui-customization/features/async/comments/comment-tool) |
| **Comment surfaces** (Text / Inline / Multi-thread) | Comment variants: wireframed, reuse the comment hooks | [`Text`](/docs/ui-customization/features/async/comments/text-comment-wireframe-variables) · [`Inline`](/docs/ui-customization/features/async/comments/inline-comments-section/wireframes) · [`Multi-thread`](/docs/ui-customization/features/async/comments/multithread-comments/wireframes) |
| **Notifications** | Full wireframe + rich config props (panel mode, settings layout, tabs) + hooks | [`Notifications`](/docs/ui-customization/features/notifications) |
| **Reactions** | Wireframed (tool/panel/pin/tooltip/inline) + custom emoji sets + hooks | [`Reactions`](/docs/ui-customization/features/reactions) |
| **Recorder & Transcription** | Deepest wireframe tree (control panel/player/tools/dialogs/subtitles/transcript) + hooks | [`Recorder and transcription`](/docs/ui-customization/features/recorder-and-transcription) |
| **@Mentions & Autocomplete** | Custom mention data (contacts/groups/custom) + option/chip wireframes | [`Mentions and autocomplete`](/docs/ui-customization/features/mentions-and-autocomplete) |
| **Activity Log** | Full wireframe + data hooks | [`Activity Log`](/docs/ui-customization/features/activity-log) |
| **Tags / Arrows / Areas** | **Thin**: CSS + props (+ Tag hooks); no wireframe slots | [`Annotations, tags, arrows, and areas`](/docs/ui-customization/features/annotations-tags-arrows-areas) |
| **View Analytics** | Wireframe variables for the viewers indicator | [`View Analytics wireframe variables`](/docs/ui-customization/features/async/view-analytics/wireframe-variables) |
| **Rewriter** | Wireframe variables for the AI rewriter | [`Rewriter wireframe variables`](/docs/ui-customization/features/async/rewriter/wireframe-variables) |
## Realtime collaboration
| Feature | Customization depth | Guide |
| --------------------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Presence & Live Cursors** | Per-item wireframes (avatar list / cursor pointer) + hooks; flat-config | [`Presence`](/docs/ui-customization/features/realtime/presence) · [`Cursors`](/docs/ui-customization/features/realtime/cursors) |
| **Huddle** | Wireframe variables (flat-config) for the huddle panels and attendee tiles | [`Huddle wireframe variables`](/docs/ui-customization/features/realtime/huddle/wireframe-variables) |
| **Live Selection** | CSS classes + default-styling toggle | [`Live Selection`](/docs/ui-customization/features/realtime/live-selection) |
| **Single Editor Mode** | Panel wireframe | [`Single Editor Mode`](/docs/ui-customization/features/realtime/single-editor-mode) |
Component and wireframe **names** per feature are in [`Component catalog`](/docs/ui-customization/reference/component-catalog#other-features-brief).
## Two things to remember for non-comment features
1. **Flat-config variables** ([what this means](/docs/ui-customization/template-variables#which-name-form-to-use)). Cursor, Presence, Huddle, Recording, Transcription, Reactions, Autocomplete, View, Area, Arrow, and Tag read wireframe tokens as **`{componentConfig.}`**, not the short aliases comments use.
2. **Some features are surfaced through another feature.** Transcription and subtitles render inside the recorder player's slots, and reaction actions live on the comment element. Each feature page states its exact limits.
Accessibility, localization, RTL, and responsive behavior apply to all of these: see [`Accessibility & localization`](/docs/ui-customization/accessibility-and-localization).