<VeltWireframe>
    <VeltCommentsSidebarWireframe>
        {/* Skeleton */}
        <VeltCommentsSidebarWireframe.Skeleton />
        <VeltCommentsSidebarWireframe.Panel>
            {/* Header */}
            <VeltCommentsSidebarWireframe.Header>
                <div className="bg-blue-400">
                    <VeltCommentsSidebarWireframe.CloseButton/>
                    <VeltCommentsSidebarWireframe.Search placeholder="Search Comments" />
                    <VeltCommentsSidebarWireframe.Status/>
                    <VeltCommentsSidebarWireframe.FilterButton/>
                </div>
            </VeltCommentsSidebarWireframe.Header>
            {/* Filter */}
            <VeltCommentsSidebarWireframe.Filter>
                <VeltCommentsSidebarWireframe.Filter.Title/>
                <VeltCommentsSidebarWireframe.Filter.CloseButton/>
                <VeltCommentsSidebarWireframe.Filter.Location/>
                <VeltCommentsSidebarWireframe.Filter.People/>
                <VeltCommentsSidebarWireframe.Filter.Category/>
                <VeltCommentsSidebarWireframe.Filter.Priority/>
                <VeltCommentsSidebarWireframe.Filter.CommentType/>
                <VeltCommentsSidebarWireframe.Filter.Versions/>
                <VeltCommentsSidebarWireframe.Filter.GroupBy/>
                <VeltCommentsSidebarWireframe.Filter.DoneButton/>
            </VeltCommentsSidebarWireframe.Filter>
            {/* List */}
            <VeltCommentsSidebarWireframe.List/>
            {/* Empty Placeholder */}
            <VeltCommentsSidebarWireframe.EmptyPlaceholder/>
            {/* Page Mode Composer */}
            <VeltCommentsSidebarWireframe.PageModeComposer/>
        <VeltCommentsSidebarWireframe.Panel/>
    </VeltCommentsSidebarWireframe>
</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>
    <VeltCommentsSidebarWireframe>
        ...
        {/* Header */}
        <VeltCommentsSidebarWireframe.Header>
            <div className="bg-blue-400">
                <VeltCommentsSidebarWireframe.CloseButton/>
                <VeltCommentsSidebarWireframe.Search placeholder="Search Comments" />
                <VeltCommentsSidebarWireframe.Status/>
                <VeltCommentsSidebarWireframe.FilterButton/>
            </div>
        </VeltCommentsSidebarWireframe.Header>
        ...
    </VeltCommentsSidebarWireframe>
</VeltWireframe>

<VeltWireframe>
    <VeltCommentsSidebarWireframe>
        {/* Skeleton */}
        <VeltCommentsSidebarWireframe.Skeleton />
        <VeltCommentsSidebarWireframe.Panel>
            {/* Header */}
            <VeltCommentsSidebarWireframe.Header>
                <div className="bg-blue-400">
                    <VeltCommentsSidebarWireframe.CloseButton/>
                    <VeltCommentsSidebarWireframe.Search placeholder="Search Comments" />
                    <VeltCommentsSidebarWireframe.Status/>
                    <VeltCommentsSidebarWireframe.FilterButton/>
                </div>
            </VeltCommentsSidebarWireframe.Header>
            {/* Filter */}
            <VeltCommentsSidebarWireframe.Filter>
                <VeltCommentsSidebarWireframe.Filter.Title/>
                <VeltCommentsSidebarWireframe.Filter.CloseButton/>
                <VeltCommentsSidebarWireframe.Filter.Location/>
                <VeltCommentsSidebarWireframe.Filter.People/>
                <VeltCommentsSidebarWireframe.Filter.Category/>
                <VeltCommentsSidebarWireframe.Filter.Priority/>
                <VeltCommentsSidebarWireframe.Filter.CommentType/>
                <VeltCommentsSidebarWireframe.Filter.Versions/>
                <VeltCommentsSidebarWireframe.Filter.GroupBy/>
                <VeltCommentsSidebarWireframe.Filter.DoneButton/>
            </VeltCommentsSidebarWireframe.Filter>
            {/* List */}
            <VeltCommentsSidebarWireframe.List/>
            {/* Empty Placeholder */}
            <VeltCommentsSidebarWireframe.EmptyPlaceholder/>
            {/* Page Mode Composer */}
            <VeltCommentsSidebarWireframe.PageModeComposer/>
        <VeltCommentsSidebarWireframe.Panel/>
    </VeltCommentsSidebarWireframe>
</VeltWireframe>

Was this page helpful?

Dark ModeUse Custom CSS