Understanding Wireframes

Wireframes are templates that define how Velt components should render in your app:

Act as global templates. Changes apply everywhere the component is used.
Allow full customization of layout and styling.
Wireframes themselves don’t render in the DOM.

Adding any children to a wireframe template removes most of its default styling. This gives you full control over the layout. However, you will still need to use a combination of CSS overrides on any remaining styles and your own components to achieve the desired styling.

Step-by-Step Setup

Add the root Wireframe Container

React / Next.js
Other Frameworks

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

<VeltProvider>
    <VeltWireframe>
        {/* Your customization templates */}
    </VeltWireframe>
</VeltProvider>

<!-- Add style="display:none;" to prevent flash before SDK init -->
<velt-wireframe style="display:none;">
    <!-- Your customization templates -->
</velt-wireframe>

Add Component Wireframes

Copy the wireframe template of the component you want to customize. You can find the wireframe templates in the component’s UI Customization documentation.

React / Next.js
Other Frameworks

<VeltWireframe>
    {/* Example: Customizing Comment Dialog Header */}
    <VeltCommentDialogWireframe.Header>
        <div className="flex items-center gap-2">
            <VeltCommentDialogWireframe.Status />
            <VeltCommentDialogWireframe.Priority />
            <div className="flex-grow" />
            <VeltCommentDialogWireframe.Options />
            <VeltCommentDialogWireframe.ResolveButton />
        </div>
    </VeltCommentDialogWireframe.Header>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <!-- Example: Customizing Comment Dialog Header -->
    <velt-comment-dialog-header-wireframe>
        <div class="flex items-center gap-2">
            <velt-comment-dialog-status-wireframe></velt-comment-dialog-status-wireframe>
            <velt-comment-dialog-priority-wireframe></velt-comment-dialog-priority-wireframe>
            <div class="flex-grow"></div>
            <velt-comment-dialog-options-wireframe></velt-comment-dialog-options-wireframe>
            <velt-comment-dialog-resolve-button-wireframe></velt-comment-dialog-resolve-button-wireframe>
        </div>
    </velt-comment-dialog-header-wireframe>
</velt-wireframe>

Customize the Template

You can customize using the options like:

Layout: Customize the layout of the component
Styling: Apply custom CSS and themes
Template Variables: Add dynamic content to your templates
Conditional Templates: Add conditional rendering logic
Custom Actions: Add custom interactivity

Example:

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentDialogWireframe.Header>
        <div>
            Custom HTML
        </div>
        <VeltCommentDialogWireframe.Status />
        <VeltCommentDialogWireframe.Priority />
        <VeltCommentDialogWireframe.Options />
        <VeltCommentDialogWireframe.CopyLink />
        <VeltCommentDialogWireframe.ResolveButton />
    </VeltCommentDialogWireframe.Header>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-comment-dialog-header-wireframe>
        <div>
            Custom HTML
        </div>
        <velt-comment-dialog-status-wireframe></velt-comment-dialog-status-wireframe>
        <velt-comment-dialog-priority-wireframe></velt-comment-dialog-priority-wireframe>
        <velt-comment-dialog-options-wireframe></velt-comment-dialog-options-wireframe>
        <velt-comment-dialog-copy-link-wireframe></velt-comment-dialog-copy-link-wireframe>
        <velt-comment-dialog-resolve-button-wireframe></velt-comment-dialog-resolve-button-wireframe>
    </velt-comment-dialog-header-wireframe>
</velt-wireframe>

Add the Feature Components

After defining templates, use the actual feature components in your app as normal.
The wireframe components are not meant to be rendered directly in your application. They merely serve as template definitions.

React / Next.js
Other Frameworks

function MyApp() {
  return (
    <div className="my-app">
      <VeltComments /> {/* Will use your custom template */}
    </div>
  )
}

<div class="my-app">
  <velt-comments></velt-comments> <!-- Will use your custom template -->
</div>

​Understanding Wireframes

​Step-by-Step Setup

Understanding Wireframes

Step-by-Step Setup