This is a general setup to allow for Advanced UI Customization of any of our SDK Components.

1

Add the VeltWireframe component

Import and add the VeltWireframe component to the root of your VeltProvider.

You will add the wireframes of any components you want to customize within the VeltWireframe component.

import { VeltWireframe, VeltProvider } from '@veltdev/react'

<VeltProvider>
    <VeltWireframe>
        // Customized component wireframes go here
    </VeltWireframe>
</VeltProvider>
2

Add default wireframe to VeltWireframe

Copy the wireframe of the component you want to modify.

Place it inside the <VeltWireframe> component.

For this example, we use the Wireframe for the VeltCommentsSidebar component.

<VeltWireframe>
    <VeltCommentsSidebarWireframe>
        <VeltCommentsSidebarWireframe.Header>
            <VeltCommentsSidebarWireframe.CloseButton/>
            <VeltCommentsSidebarWireframe.Search/>
            <VeltCommentsSidebarWireframe.Status/>
            <VeltCommentsSidebarWireframe.FilterButton/>
        </VeltCommentsSidebarWireframe.Header>
        <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>
        <VeltCommentsSidebarWireframe.List/>
        <VeltCommentsSidebarWireframe.EmptyPlaceholder/>
        <VeltCommentsSidebarWireframe.PageModeComposer/>
    </VeltCommentsSidebarWireframe>

</VeltWireframe>
3

Modifying a Wireframe template

Modify the layout of the wireframe by adding custom HTML or CSS, reorganizing subcomponents, or omitting subcomponents within the template.

In this example we are moving the Header to the bottom of the template, removing the Page Mode subcomponent, and adding some custom HTML and CSS to the Header.

If you add any children to a Wireframe, the default styling of that particular component will be removed
<VeltWireframe>
    <VeltCommentsSidebarWireframe>   
        <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>
        <VeltCommentsSidebarWireframe.List/>
        <VeltCommentsSidebarWireframe.EmptyPlaceholder/>
        {/* Omitting Page Mode subcomponent */}
        {/* <VeltCommentsSidebarWireframe.PageModeComposer/> *\}
        {/* Moved Header to bottom of the template */}
        <VeltCommentsSidebarWireframe.Header>
            <div style={{backgroundColor:'red'}}>
                Custom Header HTML
            </div>
            <VeltCommentsSidebarWireframe.CloseButton/>
            <VeltCommentsSidebarWireframe.Search/>
            <VeltCommentsSidebarWireframe.Status/>
            <VeltCommentsSidebarWireframe.FilterButton/>
        </VeltCommentsSidebarWireframe.Header>
    </VeltCommentsSidebarWireframe>
</VeltWireframe>
To customize multiple components, simply add more Wireframes as children to the VeltWireframe component.
4

Place the component

After modifying the wireframe inside the VeltWireframe component, place the component in your app layout as you normally would.

The wireframe isn’t something that renders directly. They are just template definitions that define how the component will render globally. You still place the Velt SDK components in your app layout as you normally would.
<div className="layout">
    <VeltCommentsSidebar/>
</div>

Was this page helpful?

General ConceptsVariants