> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-e6426361.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Comment Bubble Primitives

> Primitive components for building custom Comment Bubble UIs — compose floating avatars, unread indicators, and comments count from low-level building blocks.

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

<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.
</Note>

### VeltCommentBubbleAvatar

Avatar component for the comment bubble.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    import { VeltCommentBubbleAvatar } from '@veltdev/react';

    <VeltCommentBubbleAvatar />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-bubble-avatar></velt-comment-bubble-avatar>
    ```
  </Tab>
</Tabs>

***

### VeltCommentBubbleCommentsCount

Comments count display for the comment bubble.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    import { VeltCommentBubbleCommentsCount } from '@veltdev/react';

    <VeltCommentBubbleCommentsCount />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-bubble-comments-count></velt-comment-bubble-comments-count>
    ```
  </Tab>
</Tabs>

***

### VeltCommentBubbleUnreadIcon

Unread indicator icon for the comment bubble.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    import { VeltCommentBubbleUnreadIcon } from '@veltdev/react';

    <VeltCommentBubbleUnreadIcon defaultCondition={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-bubble-unread-icon></velt-comment-bubble-unread-icon>
    ```
  </Tab>
</Tabs>