> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup Wireframes

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

<Warning>
  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.
</Warning>

## Step-by-Step Setup

<Steps>
  <Step title="Add the root Wireframe Container">
    <Tabs>
      <Tab title="React / Next.js">
        ```jsx theme={null}
        import { VeltWireframe, VeltProvider } from '@veltdev/react'

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

      <Tab title="Other Frameworks">
        ```html theme={null}
        <!-- Add style="display:none;" to prevent flash before SDK init -->
        <velt-wireframe style="display:none;">
            <!-- Your customization templates -->
        </velt-wireframe>
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="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.

    <Tabs>
      <Tab title="React / Next.js">
        ```jsx theme={null}
        <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>
        ```
      </Tab>

      <Tab title="Other Frameworks">
        ```html theme={null}
        <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>
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Customize the Template">
    You can customize using the options like:

    * [Layout](/ui-customization/layout): Customize the layout of the component
    * [Styling](/ui-customization/styling): Apply custom CSS and [themes](https://playground.velt.dev/themes)
    * [Template Variables](/ui-customization/template-variables): Add dynamic content to your templates
    * [Conditional Templates](/ui-customization/conditional-templates): Add conditional rendering logic
    * [Custom Actions](/ui-customization/custom-action-component): Add custom interactivity

    **Example:**

    <Tabs>
      <Tab title="React / Next.js">
        ```jsx theme={null}
        <VeltWireframe>
            <VeltCommentDialogWireframe.Header>
                <div>
                    Custom HTML
                </div>
                <VeltCommentDialogWireframe.Status />
                <VeltCommentDialogWireframe.Priority />
                <VeltCommentDialogWireframe.Options />
                <VeltCommentDialogWireframe.CopyLink />
                <VeltCommentDialogWireframe.ResolveButton />
            </VeltCommentDialogWireframe.Header>
        </VeltWireframe>
        ```
      </Tab>

      <Tab title="Other Frameworks">
        ```html theme={null}
        <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>
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="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.

    <Tabs>
      <Tab title="React / Next.js">
        ```jsx theme={null}
        function MyApp() {
          return (
            <div className="my-app">
              <VeltComments /> {/* Will use your custom template */}
            </div>
          )
        }
        ```
      </Tab>

      <Tab title="Other Frameworks">
        ```html theme={null}
        <div class="my-app">
          <velt-comments></velt-comments> <!-- Will use your custom template -->
        </div>
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>