<VeltWireframe>
    <VeltCommentDialogWireframe>
        {/*  Ghost Banner */}
        <VeltCommentDialogWireframe.GhostBanner />
        {/*  Private Banner */}
        <VeltCommentDialogWireframe.PrivateBanner />
        {/*  Assignee Banner */}
        <div className="bg-blue-500 p-4 m-4 rounded-full">
            <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>

You can use a CSS library such as Tailwind to style the SDK components.

Simply add the library’s classes to the SDK components just like you would to any other component.

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

Conceptual Example:

<VeltWireframe>
    <VeltCommentDialogWireframe>
    ...
    <div className="bg-blue-500 p-4 m-4 rounded-full">
        <VeltCommentDialogWireframe.AssigneeBanner>
            <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
            <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
            <VeltCommentDialogWireframe.AssigneeBanner.UserName />
        </VeltCommentDialogWireframe.AssigneeBanner>
    </div>
    ...
    </VeltCommentDialogWireframe>
</VeltWireframe>