​
1. Add the Velt Wireframe component

  • Add the Velt Wireframe component to the root of your app.
  • Add the wireframes of any components you want to customize within the Velt Wireframe component.
import { VeltWireframe, VeltProvider } from '@veltdev/react'

<VeltProvider>
    <VeltWireframe>
        {/* Customized component wireframes go here */}
    </VeltWireframe>
</VeltProvider>

​
2. Add a component’s wireframe

  • Copy the wireframe of the component you want to modify. You will find the wireframe for each component within it’s feature documentation.
  • Place it inside the Velt Wireframe component.
<VeltWireframe>
    <VeltCommentDialogWireframe.Header>
        <VeltCommentDialogWireframe.Status />
        <VeltCommentDialogWireframe.Priority />
        <VeltCommentDialogWireframe.Options />
        <VeltCommentDialogWireframe.CopyLink />
        <VeltCommentDialogWireframe.ResolveButton />
    </VeltCommentDialogWireframe.Header>
</VeltWireframe>

​
3. Customize the wireframe template

  • Modify the layout of the wireframe by:
    • Adding custom HTML or CSS
    • Reorganizing subcomponents
    • Removing subcomponents within the template
  • To customize multiple components, simply add more Wireframes as children to the Velt Wireframe component.
If you add any children to a Wireframe, the default styling of that particular component will be removed
<VeltWireframe>
    <VeltCommentDialogWireframe.Header>
        <div>
            Custom HTML
        </div>
        <VeltCommentDialogWireframe.Status />
        <VeltCommentDialogWireframe.Priority />
        <VeltCommentDialogWireframe.Options />
        <VeltCommentDialogWireframe.CopyLink />
        <VeltCommentDialogWireframe.ResolveButton />
    </VeltCommentDialogWireframe.Header>
</VeltWireframe>

​
4. Add the component

Now that you’ve modified the wireframe, place the component (not the wireframe) in your app layout as you normally would

The wireframe components are not meant to be rendered directly in your application. They serve as template definitions that specify how Velt components will render globally. After defining your wireframes, you should still place the actual Velt components in your app layout as you normally would.

<div className="layout">
    <VeltComments />
</div>

Was this page helpful?

VariantsOverview