<VeltWireframe>
    <VeltCommentDialogWireframe>
        {/*  Ghost Banner */}
        <VeltCommentDialogWireframe.GhostBanner />
        {/*  Private Banner */}
        <VeltCommentDialogWireframe.PrivateBanner />
        {/*  Assignee Banner */}
        <div style={{fontSize:'24px',backgroundColor:'red'}}>
            <VeltCommentDialogWireframe.AssigneeBanner>
                <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
                <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
                <VeltCommentDialogWireframe.AssigneeBanner.UserName />
            </VeltCommentDialogWireframe.AssigneeBanner>
        </div>
        {/*  Header */}
        <VeltCommentDialogWireframe.Header>
            {/*  Following subcomponents can be used outside header as well */}
            {/*  # Pin Dialog Header */}
            <VeltCommentDialogWireframe.Status />
            <VeltCommentDialogWireframe.Priority />
            <VeltCommentDialogWireframe.Options />
            <VeltCommentDialogWireframe.CopyLink />
            <VeltCommentDialogWireframe.ResolveButton />
            {/*  # Sidebar Dialog Header */}
            <VeltCommentDialogWireframe.CommentIndex />
            <VeltCommentDialogWireframe.CommentCategory />
            <VeltCommentDialogWireframe.CommentSuggestionStatus />
        </VeltCommentDialogWireframe.Header>
        {/* Private Badge */}
        <VeltCommentDialogWireframe.PrivateBadge/>
        {/* Body */}
        <VeltCommentDialogWireframe.Body>
            <VeltCommentDialogWireframe.Threads>
                <VeltCommentDialogWireframe.ThreadCard>
                    <VeltCommentDialogWireframe.ThreadCard.Avatar />
                    <VeltCommentDialogWireframe.ThreadCard.Name />
                    <VeltCommentDialogWireframe.ThreadCard.Time />
                    <VeltCommentDialogWireframe.ThreadCard.DeviceType />
                    <VeltCommentDialogWireframe.ThreadCard.Options />
                    <VeltCommentDialogWireframe.ThreadCard.Message />
                    <VeltCommentDialogWireframe.ThreadCard.ReactionTool />
                    <VeltCommentDialogWireframe.ThreadCard.Reactions />
                    <VeltCommentDialogWireframe.ThreadCard.Files />
                    <VeltCommentDialogWireframe.ThreadCard.Recordings />
                </VeltCommentDialogWireframe.ThreadCard>
                <VeltCommentDialogWireframe.MoreReply />
            </VeltCommentDialogWireframe.Threads>
            <VeltCommentDialogWireframe.ToggleReply />
        </VeltCommentDialogWireframe.Body>
        {/* Composer */}
        <VeltCommentDialogWireframe.Composer>
            <VeltCommentDialogWireframe.Composer.Files />
            <VeltCommentDialogWireframe.Composer.Recordings />
            <VeltCommentDialogWireframe.Composer.Input />
            <VeltCommentDialogWireframe.Composer.ActionButton type="userMentions" />
            <VeltCommentDialogWireframe.Composer.ActionButton type="file" />
            <VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
            <VeltCommentDialogWireframe.Composer.ActionButton type="video" />
            <VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
            <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
            <VeltCommentDialogWireframe.Composer.AssignUser />
        </VeltCommentDialogWireframe.Composer>
        {/* All Comments */}
        <VeltCommentDialogWireframe.AllComment />
        {/* Approve */}
        <VeltCommentDialogWireframe.Approve />
        {/* Sign In */}
        <VeltCommentDialogWireframe.SignIn />
        {/* Upgrade */}
        <VeltCommentDialogWireframe.Upgrade />
        {/* Suggestion Action */}
        <VeltCommentDialogWireframe.SuggestionAction>
            <VeltCommentDialogWireframe.SuggestionAction.Accept />
            <VeltCommentDialogWireframe.SuggestionAction.Reject />
        </VeltCommentDialogWireframe.SuggestionAction>
    </VeltCommentDialogWireframe>
</VeltWireframe>

Add Custom CSS

To add custom CSS to the component, just add CSS into the wireframe template.

To add Custom CSS, ensure that the Shadow DOM is turned off for the SDK component you are styling.

Conceptual Example:

<VeltWireframe>
    <VeltCommentDialogWireframe>
    ...
    <div style={{fontSize:'24px',backgroundColor:'red'}}>
        <VeltCommentDialogWireframe.AssigneeBanner>
            <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
            <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
            <VeltCommentDialogWireframe.AssigneeBanner.UserName />
        </VeltCommentDialogWireframe.AssigneeBanner>
    </div>
    ...
    </VeltCommentDialogWireframe>
</VeltWireframe>