>

Back To Top - Used for to scroll back to top

import BackToTop from '@components/BackToTop';

<BackToTop/>

Props

Example Pages

Global

BlackLeftRightBanner - Used for black Left Right Banner

Free Virtual
Design Consultation

Start creating with our award-winning design professionals today!

Request Free Consultation

Free Virtual
Design Consultation

Start creating with our award-winning design professionals today!

Request Free Consultation
import BlackLeftRightBanner from '@components/BlackLeftRightBanner';


<BlackLeftRightBanner 
  desktop={desktopImage}
  mobile={mobileImage}
  reverse
  children={overlay elements if any}
/>

Props

NameTypeDefaultDescription
desktopobject || nullnullAccepts an object with src, height and width or imported image from assets for desktop
mobileobject || nullnullAccepts an object with src, height and width or imported image from assets for mobile
reverse booleannullUsed to reverse the banner
childrenJSX ElementnullAny Overlay Content Element

Example Pages

HP template

BreadCrumb - Always on top of the page. Used to add BreadCrumbs to any page

import HeroBanner from '@components/HeroBanner';


  <BreadCrumb 
    links={links}
  />

Props

NameTypeDefaultDescription
linksobjectHomeAccepts an object with name and link

Example Pages

Kitchen Sinks
24in Home Bar Cabinets
Workbenches

HeroBanner - Simple Full Width Banner with Image and Overlay content.

newage-webbbb
newage-webbbb
import HeroBanner from '@components/HeroBanner';


  <HeroBanner 
    desktop={desktopImage}
    mobile={mobileImage}
    alt="alt text for corresponding images"
    priority={true || false}
    children={overlay elements if any}
  />

Props

NameTypeDefaultDescription
desktopobject || nullnullAccepts an object with src, height and width or imported image from assets for desktop
mobileobject || nullnullAccepts an object with src, height and width or imported image from assets for mobile
altstringnewage-webbbbalt text for images
prioritybooleanfalseinstant load images
childrenJSX ElementnullAny Overlay Content Element

Example Pages

Kitchen Sinks
24in Home Bar Cabinets
Workbenches

CompareCabinets - Used for comparing two Products

import CompareCabinets from "@components/CompareCabinets";


  <CompareCabinets 
    compare_heading= "Use for giving proper heading"
    compare_description = "Use for giving proper Description"
    hasTitle = {True || False}
    CompareItems = [],
    CompareItemsMob = "compare items for mobile"
    TwoItemsMobile = "for displaying two items in mobile"
    snaUrls = " Adding respective URLs of the products"
    mobileSlider={True || False}
    dots = {True || False}
  />

Props

NameTypeDefaultDescription
compare_headingstringnullUse for giving proper heading
compare_descriptionstringnullUse for giving proper Description
hasTitlebooleantrue{True || False}
CompareItemsstringnull[]
CompareItemsMobstringnullcompare items for mobile
snaUrlsstringnullAdding respective URLs of the products

Example Pages

Compare Workbenches

CompareSlider - Slider to Compare two Images

import CompareSlider from "@components/CompareSlider";


  <CompareSlider 
    src1="left hand side img url"
    src2="right hand side img url"
    mobileSrc1="left hand side img url mobile"
    mobileSrc2="right hand side img url mobile"
    altTextLeft="alt text for left img"
    altTextRight="alt text for right img"
  />

Props

NameTypeDefaultDescription
src1stringnullAdd url of left hand side img
src2stringnullAdd url of right hand side img
mobileSrc1stringnullAdd url of left hand side img for mobile (below 767px)
mobileSrc2stringnullAdd url of right hand side img for mobile (below 767px)
altTextLeftstringnullAdd alt text for left hand side image
altTextRightstringnullAdd alt text for right hand side image

Example Pages

Design Services
Granite Countertops
Linkable Shop Lights

CollectionGrid - All Collection products

import CollectionGrid from "@components/CollectionGrid";


  <CollectionGrid 
    data = "data"
    loading = {loading}
  />

Props

NameTypeDefaultDescription
datastringdefault headingcollections of data
loadingstringfalseto display loading animation

Example Pages

New Collection

CombinedPIPSection - Used to fetch products by combining two with their collection URLs







import CombinedPIPSection from '@components/CombinedPIPSection';


  <CombinedPIPSection 
   snaUrl="add SNA collection URL"
   rowCounts="no. of columns"
   customImages={object of images to replace fetched ones}
   swatch={true || false}
   seeMoreBtn={true || false}
   isSlider={true || false}
   includeIds={object of product ids from collection to fetch}
   excludeIds={object of product ids from collection to not fetch}
  />

Props

NameTypeDefaultDescription
snaUrlobjectnullAccepts an object with a list of product URLs
rowCountsnumber3add no. of columns you need
customImagesobject || nullnullAccepts an object with a list of product images
swatchbooleanfalseSwatches are visible if true
seeMoreBtnbooleanfalseAdds a See More Products div to the grid
isSliderbooleanfalseTransforms to a slider in mobile
includeIdsobjectnullAccepts an object with a list of product ids to fetch
excludeIdsobjectnullAccepts an object with a list of product ids to not fetch

Example Pages

21in-home-bar-cabinets

CombinedPIPSKUSection - Used to fetch products by combining two collection SKUs







import CombinedPIPSKUSection from '@components/CombinedPIPSKUSection';


  <CombinedPIPSKUSection 
   SKU="add SNA collection SKUs"
   rowCounts="no. of columns"
   customImages={object of images to replace fetched ones}
   swatch={true || false}
   seeMoreBtn={true || false}
   isSlider={true || false}
   includeIds={object of product ids from collection to fetch}
   excludeIds={object of product ids from collection to not fetch}
  />

Props

NameTypeDefaultDescription
SKUobjectnullAccepts an object with a list of product SKUs
rowCountsnumber3add no. of columns you need
customImagesobject || nullnullAccepts an object with a list of product images
swatchbooleanfalseSwatches are visible if true
seeMoreBtnbooleanfalseAdds a See More Products div to the grid
isSliderbooleanfalseTransforms to a slider in mobile
includeIdsobjectnullAccepts an object with a list of product ids to fetch
excludeIdsobjectnullAccepts an object with a list of product ids to not fetch

Example Pages

21in-home-bar-cabinets

BuyMoreSaveMore - Used to add Buy More Save More offer Banner

BOOK YOUR VIRTUAL DESIGN CONSULTATION NOW

Save up to 15%  Get design help from product experts in the comfort of your own home

BOOK YOUR VIRTUAL DESIGN CONSULTATION NOW

Save up to 15%  Get design help from product experts in the comfort of your own home
import BuyMoreSaveMore from "@components/BuyMoreSaveMore";


  <BuyMoreSaveMore 
    bmsm_heading="change default heading"
    discount="change default discount text"
    description="change default description"
    bmsmUrl="change default discount page url"
    bgDark={true || false}
  />

Props

NameTypeDefaultDescription
bmsm_headingstringdefault headingUsed to change default heading
discountstringdefault discountUsed to default discount text
descriptionstringdefault descriptionUsed to change default description
bmsmUrlstringdefault urlUsed to change default discount page url
bgDarkbooleanfalseUsed to change to a dark bg variant

Example Pages

Luxury Vinyl Plank
Garage Accessories
Infrared Heater

FAQs - Used to display FAQs on the page.

import FAQs from "@components/FAQs";


  <FAQs/>

Example Pages

Replacement

GridRowItems - Used to display divs in a grid

Explore Our Products

We’ll walk you through all the options and help with your selection.

Browse Products

Connect with a designer

Schedule your personal consultation by phone or interactive video.

Book Consultation

Preview your results

3D renders let you visualize how your new space will look.

View Before & After Gallery