Variants

Variants allow you to create and use multiple customized versions of a single component in different parts of your app.

Example: You can have a customized Comment Dialog for the sidebar and another for the pin.

​

1. Define a Variant

To define a variant:

• Add a template of the component wireframe to the Velt Wireframe component
• Give it a variant name

• React / Next.js
• Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe variant="preview-page">
        #Your wireframe for the variant
    </VeltCommentsSidebarWireframe>

    <VeltCommentsSidebarWireframe variant="editor-page">
        #Your wireframe for the variant
    </VeltCommentsSidebarWireframe>
</VeltWireframe>

​

2. Use a Variant

To apply a specific variant, simply set the variant prop when using the Velt component in your app.

• React / Next.js
• Other Frameworks

<VeltCommentsSidebar variant="preview-page"/>

​

3. Pre-defined Variants

• Some components have pre-defined variants with reserved names and specific functionality
• To customize pre-defined variants:
  1. Add the variant property with its reserved name to the specific Velt Wireframe component you want to customize
  2. Provide the customized template for that variant within the wireframe component
• Check each component’s customization documentation for available pre-defined variants

For example, the Comment Dialog has two pre-defined variants:

• React / Next.js
• Other Frameworks

<VeltWireframe>
    {/* This pre-defined variant will change the appearance of the Comment Dialog within Pin, Area, and Text comments only */}
    <VeltCommentDialogWireframe variant="dialog">
        #Your wireframe for variant
    </VeltCommentDialogWireframe>

    {/* This pre-defined variant will change the appearance of the Comment Dialog within the Sidebar only */}
    <VeltCommentDialogWireframe variant="sidebar">
        #Your wireframe for variant
    </VeltCommentDialogWireframe>
</VeltWireframe>

​

4. Unsupported Components

Some components currently do not support variants. Please check the customization docs for each component to check if variants are supported.