Setup Wireframes

Set up Velt wireframes step by step with React and Other Frameworks examples.

New to wireframes? Start with the Wireframes Overview for the model, the interactivity rule, and scoping. This page is the setup walkthrough.

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

1. Add the root Wireframe Container

   React / Next.js

   import { VeltWireframe, VeltProvider } from '@veltdev/react'
   
   <VeltProvider>
       <VeltWireframe>
           {/* Your customization templates */}
       </VeltWireframe>
   </VeltProvider>
   

   Other Frameworks

   <!-- Add style="display:none;" to prevent flash before SDK init -->
   <velt-wireframe style="display:none;">
       <!-- Your customization templates -->
   </velt-wireframe>
   
2. 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

   <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>
   

   Other Frameworks

   <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>
   
3. Customize the Template

   You can customize using the options like:

   • Layout Customization: Replace, remove, reorder parts, and create variants
   • Styling: Apply custom CSS and themes
   • Template Variables: Add dynamic content to your templates
   • Conditional Templates: Add conditional rendering logic
   • Action Components: Add custom interactivity

   Example:

   React / Next.js

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

   Other Frameworks

   <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>
   
4. 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

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

   Other Frameworks

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