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

# Comment Bubble Primitives

> Primitive-based components for building custom Comment Bubble interfaces with maximum flexibility.

> [!TIP]
>
> Explore primitives interactively in our [Storybook](https://storybook.velt.dev/).

> [!NOTE]
>
> Comment Bubble primitives can be used standalone: pass `annotationId` (React) or `annotation-id` (HTML) to render a primitive with real annotation data without a parent root component.

### VeltCommentBubbleAvatar

Avatar component for the comment bubble.

> [tab] React / Next.js
>
> ```jsx theme={null}
> import { VeltCommentBubbleAvatar } from '@veltdev/react';
>
> <VeltCommentBubbleAvatar />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-bubble-avatar></velt-comment-bubble-avatar>
> ```

***

### VeltCommentBubbleCommentsCount

Comments count display for the comment bubble.

> [tab] React / Next.js
>
> ```jsx theme={null}
> import { VeltCommentBubbleCommentsCount } from '@veltdev/react';
>
> <VeltCommentBubbleCommentsCount />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-bubble-comments-count></velt-comment-bubble-comments-count>
> ```

***

### VeltCommentBubbleUnreadIcon

Unread indicator icon for the comment bubble.

> [tab] React / Next.js
>
> ```jsx theme={null}
> import { VeltCommentBubbleUnreadIcon } from '@veltdev/react';
>
> <VeltCommentBubbleUnreadIcon defaultCondition={true} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-bubble-unread-icon></velt-comment-bubble-unread-icon>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.