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

# Setup Wireframes

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

New to wireframes? Start with the [Wireframes Overview](/docs/ui-customization/layout) for the model, the interactivity rule, and scoping. This page is the setup walkthrough.

<Warning>
  **Empty wireframes keep Velt's default styling.** Adding any children to a wireframe template removes most of its default styling, giving you full control over the layout. You will still need CSS overrides on any remaining styles plus your own classes to reach the desired look.
</Warning>

## Step-by-Step Setup

<Steps titleSize="h2">
  <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 Customization](/docs/ui-customization/wireframes/layout-customization): Replace, remove, reorder parts, and create variants
    * [CSS](/docs/ui-customization/styling): Apply custom CSS and [themes](https://playground.velt.dev/themes)
    * [Template Variables](/docs/ui-customization/template-variables): Add dynamic content to your templates
    * [Conditional Templates](/docs/ui-customization/conditional-templates): Add conditional rendering logic
    * [Conditional Classes](/docs/ui-customization/conditional-classes): Apply CSS classes conditionally
    * [Action Components](/docs/ui-customization/wireframes/action-components): 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>