hover design studio on mobile phone
  • Preview your design ideas on a model of your actual home

  • See how different siding choices can completely change your home's look

  • Instantly swap out different colors to find your favorite color palette

  • Share your design with a contractor who can bring it to life

Play with possibility

Turn the spark of imagination into the heartbeat of your home. Initiate your journey into real-time inspiration with the Hover® Design Studio app, brought to you by James Hardie. With tons of color and siding options to choose from, realizing your dream design is simple.

Unknown Component

Received request from Uniform to render a component with the public ID: hoverSlider.

<UniformComposition /> does not have hoverSlider mapped to a React component yet.

To teach your app how to render this component:

  • Create a React component and register it with Uniform, for example
    function HoverSlider({ body, headline }) {
      return (
        <div>
          HoverSlider!
          <UniformSlot name="content" />
        </div>
      )
    }
    
    registerUniformComponent({ type: "hoverSlider", component: HoverSlider })
    Props that your React component will receive
    {
      "body": "Ready to begin your journey with Hover® Design Studio and unlock the possibilities for your dream home? Here’s how you can get started on the path to envisioning and creating your ideal space.",
      "headline": "From ordinary to extraordinary",
      "component": {
        "type": "hoverSlider",
        "slots": {
          "content": [
            {
              "type": "media",
              "parameters": {
                "src": {
                  "type": "text",
                  "value": "//images.ctfassets.net/dzi2asncd44t/2iaIpE5moYEd9eaFIPvznJ/c21567e454fec79cb0dd7f48df6c270d/ranch-hardie-panel-hardie-trim-batten-arctic-white-after.jpg"
                },
                "altText": {
                  "type": "text",
                  "value": "ranch hardie panel hardie trim batten arctic white after"
                }
              }
            },
            {
              "type": "media",
              "parameters": {
                "src": {
                  "type": "text",
                  "value": "//images.ctfassets.net/dzi2asncd44t/20lol7NVHar6GhlnScNFdG/874debe87fdfe53f8848165cd826ad5a/ranch-before-hardie-siding-project-beige-siding.jpg"
                },
                "altText": {
                  "type": "text",
                  "value": "ranch before hardie siding project beige siding"
                }
              }
            }
          ]
        },
        "parameters": {
          "body": {
            "type": "text",
            "value": "Ready to begin your journey with Hover® Design Studio and unlock the possibilities for your dream home? Here’s how you can get started on the path to envisioning and creating your ideal space."
          },
          "headline": {
            "type": "text",
            "value": "From ordinary to extraordinary"
          }
        }
      }
    }
  • Import the component into the file where <UniformComposition /> is defined, for example
    import "../components/HoverSlider.tsx"

Need more help? Check out the documentation.

Complete and submit the form; then look for a text or email with a unique download link.

Use the unique link that was sent to your email or text inbox and get started unlocking your home’s potential.

Using the app, capture images of your home and watch the virtual model of your home come to life.

Play with textures and palettes to see how Hardie® products can transform your home’s exterior.

Build your vision, start your project

  • Build your vision, start your project

    Dive into real-life inspiration with these Hover renders to help get your home transformation started.

  • Build your vision, start your project

    Dive into real-life inspiration with these Hover renders to help get your home transformation started.

  • Build your vision, start your project

    Dive into real-life inspiration with these Hover renders to help get your home transformation started.

  • Build your vision, start your project

    Dive into real-life inspiration with these Hover renders to help get your home transformation started.

Redefine the boundaries of what’s possible

Embark on a transformative journey where your unique vision shines and your dreams become reality. It’s all at your fingertips with Hover® Design Studio, brought to you by James Hardie.

Redefine the boundaries of what’s possible

Unknown Component

Received request from Uniform to render a component with the public ID: disclaimerText.

<UniformComposition /> does not have disclaimerText mapped to a React component yet.

To teach your app how to render this component:

  • Create a React component and register it with Uniform, for example
    function DisclaimerText({ text, theme }) {
      return (
        <div>
          DisclaimerText!
          
        </div>
      )
    }
    
    registerUniformComponent({ type: "disclaimerText", component: DisclaimerText })
    Props that your React component will receive
    {
      "text": "Hover is a registered trademark of Hover Inc. Hardie® siding complies with ASTM E136 as a noncombustible cladding and with ASTM E84 for surface burning characteristics of building materials.",
      "theme": "dark",
      "component": {
        "type": "disclaimerText",
        "_pattern": "86bfbe85-3e37-4029-ac5e-97b14948d5a6",
        "parameters": {
          "text": {
            "type": "text",
            "value": "Hover is a registered trademark of Hover Inc. Hardie® siding complies with ASTM E136 as a noncombustible cladding and with ASTM E84 for surface burning characteristics of building materials."
          },
          "theme": {
            "type": "select",
            "value": "dark"
          }
        }
      }
    }
  • Import the component into the file where <UniformComposition /> is defined, for example
    import "../components/DisclaimerText.tsx"

Need more help? Check out the documentation.

Unable to find Uniform Context. Ensure the devtools plugin is activated.

logo
© 2024 James Hardie Building Products Inc. All rights reserved. ™ or ® denote trademarks or registered trademarks of James Hardie Technology Ltd.