>

Back To Top - Used for to scroll back to top

import BackToTop from '@components/BackToTop';

<BackToTop/>

Props

Example Pages

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

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

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

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

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

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

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

BuyMoreSaveMore - Used to add Buy More Save More offer Banner

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

FAQs - Used to display FAQs on the page.

import FAQs from "@components/FAQs";

<FAQs/>

Example Pages

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