Free Virtual
Design Consultation
Start creating with our award-winning design professionals today!
Request Free Consultationimport BackToTop from '@components/BackToTop';
<BackToTop/>
import BlackLeftRightBanner from '@components/BlackLeftRightBanner';
<BlackLeftRightBanner desktop={desktopImage} mobile={mobileImage} reverse children={overlay elements if any} />
Name | Type | Default | Description |
---|---|---|---|
desktop | object || null | null | Accepts an object with src, height and width or imported image from assets for desktop |
mobile | object || null | null | Accepts an object with src, height and width or imported image from assets for mobile |
reverse | boolean | null | Used to reverse the banner |
children | JSX Element | null | Any Overlay Content Element |
import HeroBanner from '@components/HeroBanner';
<BreadCrumb links={links} />
Name | Type | Default | Description |
---|---|---|---|
links | object | Home | Accepts an object with name and link |
import HeroBanner from '@components/HeroBanner';
<HeroBanner desktop={desktopImage} mobile={mobileImage} alt="alt text for corresponding images" priority={true || false} children={overlay elements if any} />
Name | Type | Default | Description |
---|---|---|---|
desktop | object || null | null | Accepts an object with src, height and width or imported image from assets for desktop |
mobile | object || null | null | Accepts an object with src, height and width or imported image from assets for mobile |
alt | string | newage-webbbb | alt text for images |
priority | boolean | false | instant load images |
children | JSX Element | null | Any Overlay Content Element |
import CollectionGrid from "@components/CollectionGrid";
<CollectionGrid data = "data" loading = {loading} />
Name | Type | Default | Description |
---|---|---|---|
data | string | default heading | collections of data |
loading | string | false | to display loading animation |
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} />
Name | Type | Default | Description |
---|---|---|---|
snaUrl | object | null | Accepts an object with a list of product URLs |
rowCounts | number | 3 | add no. of columns you need |
customImages | object || null | null | Accepts an object with a list of product images |
swatch | boolean | false | Swatches are visible if true |
seeMoreBtn | boolean | false | Adds a See More Products div to the grid |
isSlider | boolean | false | Transforms to a slider in mobile |
includeIds | object | null | Accepts an object with a list of product ids to fetch |
excludeIds | object | null | Accepts an object with a list of product ids to not fetch |
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} />
Name | Type | Default | Description |
---|---|---|---|
SKU | object | null | Accepts an object with a list of product SKUs |
rowCounts | number | 3 | add no. of columns you need |
customImages | object || null | null | Accepts an object with a list of product images |
swatch | boolean | false | Swatches are visible if true |
seeMoreBtn | boolean | false | Adds a See More Products div to the grid |
isSlider | boolean | false | Transforms to a slider in mobile |
includeIds | object | null | Accepts an object with a list of product ids to fetch |
excludeIds | object | null | Accepts an object with a list of product ids to not fetch |
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} />
Name | Type | Default | Description |
---|---|---|---|
bmsm_heading | string | default heading | Used to change default heading |
discount | string | default discount | Used to default discount text |
description | string | default description | Used to change default description |
bmsmUrl | string | default url | Used to change default discount page url |
bgDark | boolean | false | Used to change to a dark bg variant |
import FAQs from "@components/FAQs";
<FAQs/>
Explore Our Products
We’ll walk you through all the options and help with your selection.
Browse ProductsConnect with a designer
Schedule your personal consultation by phone or interactive video.
Book ConsultationPreview your results
3D renders let you visualize how your new space will look.
View Before & After Galleryimport GridRowItems from "@components/GridRowItems";
<GridRowItems mobileSlider={true || false} mobFullWidth={true || false} dots={true || false} centerMode={true || false} arrows={true || false} twoItems={true || false} arrowsColor={change arrow color} children={add child divs} />
Name | Type | Default | Description |
---|---|---|---|
mobileSlider | boolean | false | Turns into a slider in mobile(below 767px), if true |
mobFullWidth | boolean | false | Makes the mobile container full width, if true |
dots | boolean | true | Enables navigation dots below slider, if true |
centerMode | boolean | true | Enables center mode for slick slider wherein a minor part of the left and right slides is always visible, if true |
arrows | boolean | false | Enables arrow navigation icons on the left and right side. if true |
twoItems | boolean | false | Makes the largest container size as 1300px, if true |
arrowsColor | string | #000 | Used to change color of navigation arrows |
children | JSX Element | null | Add grid items using child divs |
import Gallery from "@components/Gallery";
<Gallery caption={true || false} showPopUp={true || false} zoomOnHover={true || false} items={passObject} popUpItems={passPopupImages} />
Name | Type | Default | Description |
---|---|---|---|
caption | boolean | false | Accepts captions to images, if true |
showPopUp | boolean | false | Shows Popup on clicking any image, if true |
zoomOnHover | boolean | true | Zooms in image on hover, if true |
items | object | default items | Pass images using an object on page |
popUpItems | object | default pop up items | Pass images for pop up slider using an object on page |
import ImageToggler from "@components/ImageToggler";
<ImageToggler src1="before toggle img url" src2="after toggle img url" mobileSrc1="before toggle img url mobile" mobileSrc2="after toggle img url mobile" altTextLeft="alt text for before toggle img" altTextRight="alt text for after toggle img" ToggleBtnText1="text below toggle switch before toggle" ToggleBtnText2="text below toggle switch after toggle" toggleId="used to give distinct ids to avoid error" children={overlay elements if any} />
Name | Type | Default | Description |
---|---|---|---|
src1 | string | null | Add url of before toggle img |
src2 | string | null | Add url of after toggle img |
mobileSrc1 | string | null | Add url of before toggle img for mobile (below 767px) |
mobileSrc2 | string | null | Add url of after toggle img for mobile (below 767px) |
altTextLeft | string | null | Add alt text for before toggle image |
altTextRight | string | null | Add alt text for after toggle image |
ToggleBtnText1 | string | null | Add text below toggle switch, before toggle |
toggleId | string | null | Used to give distinct ids if more than one ImageToggler is used in a section to avoid error |
ToggleBtnText2 | string | null | Add text below toggle switch, after toggle |
children | JSX Element | null | Any Overlay Content Element |
import InspirationIsRightHere from '@components/InspirationIsRightHere';
<InspirationIsRightHere //no props />
import Jumbotron from '@components/Jumbotron';
<Jumbotron bg="change background color" padding="change padding" />
Name | Type | Default | Description |
---|---|---|---|
bg | string | default heading | Used to change background color |
padding | string | default discount | Used to change padding |
import LetsDesign from "@components/LetsDesign";
<LetsDesign heading="Let’s design it together" subHeading="Let our award-winning design experts help you choose just the right pieces to build the home bar set that’s perfect for your space. Our complimentary service includes 3D visualization and pricing." mobileSubHeading="Book your FREE phone or video consultation with one of our award-wining Design Experts. They’ll help with measuring and selecting the thickness and style of flooring that’s right for your room. Plus, they can suggest other items to complement the new look of your space." src1={discuss} src2={order} ctaName="Schedule Appointment now" ctaURL="/virtual-design-consultation/" />
Name | Type | Default | Description |
---|---|---|---|
heading | string | Let's design it together | Accepts a string for heading |
subHeading | string | Book your FREE phone or video consultation with one of our award-wining Design Experts. They’ll help with measuring and selecting the thickness and style of flooring that’s right for your room. Plus, they can suggest other items to complement the new look of your space. | Accepts a string for sub-heading |
mobileSubHeading | string | Book your FREE phone or video consultation with one of our award-wining Design Experts. They’ll help with measuring and selecting the thickness and style of flooring that’s right for your room. Plus, they can suggest other items to complement the new look of your space. | Accepts string for only mobile sub heading |
src1 | object || null | @assets/countertops/Discuss_and_Design.jpg | Accepts Image path for first slide |
src2 | object || null | @assets/countertops/Design_Services_Order_Set.jpg | Accepts Image path for second slide |
ctaName | string | Contact our designers | Accepts a string for CTA name |
ctaURL | string | /virtual-design-consultation/ | Accepts path for CTA url |
alt1 | string | Vertical Slider Image 1 | Accepts slider image 1 alt tag |
alt2 | string | Vertical Slider Image 2 | Accepts slider image 2 alt tag |
import LeftRightBanner from '@components/LeftRightBanner';
<LeftRightBanner desktop={desktopImage} mobile={mobileImage} reverse={true || false} mobReverse={true || false} isSlider={true || false} compare={compareImages} video={true || false} videoSrc={videoUrl} />
Name | Type | Default | Description |
---|---|---|---|
desktop | object || null | null | Accepts an object with src, height and width or imported image from assets for desktop |
mobile | object || null | null | Accepts an object with src, height and width or imported image from assets for mobile |
reverse | boolean | false | Switches image position from right to left, if true |
mobReverse | boolean | false | Switches image position from left to right for mobile(below 767px) |
isSlider | boolean | false | Turns the image section into a CompareSlider, if true |
compare | object || null | null | Accepts an object of images with src1, src2 for desktop and mobileSrc1, mobileSrc2 for mobile |
video | boolean | false | Turns the image section into a video, if true |
videoSrc | string | default video url | Accepts video url |
import NAPButton from '@components/NAPButton';
<NAPButton text="add button text" url="add button link url" type="change button styles" videoIcon={true || false} videoModal={true || false} videoModalId="add vimeo video id" marginRight="add margin-right" marginLeft="add margin-left" marginTop="add margin-top" marginBottom="add margin-bottom" color="change button text color" mobileColor="change mobile button text color" as="to change <button> with anchor tag or something else" />
Name | Type | Default | Description |
---|---|---|---|
text | string | null | Accepts button text |
url | string | null | Accepts button link URL |
type | string | null | Accepts button style options - primary, secondary, ghost, link, link-light, outlined, video |
videoIcon | boolean | false | Adds a video icon in place of the default chevron |
videoModal | boolean | false | Enable a video modal on button click, if true |
videoModalId | string | null | Accepts vimeo video id for the modal video |
marginRight | string | null | Adds margin-right to the button |
marginLeft | string | null | Adds margin-left to the button |
marginTop | string | null | Adds margin-top to the button |
marginBottom | string | null | Adds margin-bottom to the button |
color | string | default video url | Used to change button text color |
mobileColor | string | default video url | Used to change mobile button text color |
mobileColor | string | default video url | Used to change <button> with anchor tag or something else |
Compact and Versatile
Bold Series Cabinets ›
Beautiful and Resilient
Luxury Vinyl Planks ›
Durable and Functional
Adjustable Height Workbench ›
Tasteful and Inspiring
Kitchen Solutions ›
import MultiRowItems from '@components/MultiRowItems';
<MultiRowItems> {children} </MultiRowItems>
Name | Type | Default | Description |
---|---|---|---|
children | Element | null | Items to be rendered |
CheckBox
Dropdown
EmailField
FileUploadButton
InputField
NumberField
PasswordField
Must be atleast 8 character,1 letter,1 number
RadioButton
RichMediaEditor
import CheckBox from "@components/NAPFormComponents/Checkbox";
import Dropdown from "@components/NAPFormComponents/Dropdown";
import EmailField from "@components/NAPFormComponents/EmailField";
import FileUploadButton from "@components/NAPFormComponents/FileUploadButton";
import InputField from "@components/NAPFormComponents/InputField";
import NumberField from "@components/NAPFormComponents/NumberField";
import PasswordField from "@components/NAPFormComponents/PasswordField";
import RadioButton from "@components/NAPFormComponents/RadioButton";
import RichMediaEditor from "@components/NAPFormComponents/RichMediaEditor";<CheckBox label="add label text" /> <Dropdown label="add label text"> {children} </Dropdown> <EmailField label="add label text" /> <FileUploadButton label="add label text" /> <InputField label="add label text" /> <NumberField label="add label text" /> <PasswordField label="add label text" /> <RadioButton label="add label text" /> <RichMediaEditor label="add label text" />
import NAPGrid from "@components/NAPTemplates/NAPGrid";
<NAPGrid children={add child divs} col={number} mobileSlider={true || false} />
Name | Type | Default | Description |
---|---|---|---|
children | Element | null | Items to be rendered |
col | Element | 3 | Enter the number of columns you want in your grid |
mobileSlider | Element | true | Displays a slider in mobile if true and a grid if not |
import PIPSKU from "@components/PIPSKU";
<PIPSKU swatch={true || false} SKU={object of SKUs of a single product} customImages={object of images mapped against a variants SKU ID} customTitle={string of custom product name} comparePrice={true || false} onlyPrice={true || false} />
Name | Type | Default | Description |
---|---|---|---|
swatch | boolean | false | Swatches are visible if true or multiple variants passed |
SKU | object || null | null | Accepts an object with a list of product SKUs |
customImages | object || null | null | Accepts an object with a list of variant images mapped against variant SKUs |
customTitle | string | null | Accepts a string to change default product title fetched from SKU |
comparePrice | boolean | false | Compare price is visible if true |
onlyPrice | boolean | false | Only price is visible if true |
Note : The above products have multiple varaints(upto 5-8) but we are using PIPPositionFilter to only filter the variants we need. Practical use case would be to fetch each product one by one and pass variant positions respectively.
import PIPPositionFilter from "@components/PIPPositionFilter";
<PIPPositionFilter swatch={true || false} snaUrl={object of urls} positions={object of position} /> />
Name | Type | Default | Description |
---|---|---|---|
swatch | boolean | false | Swatches are visible if true |
snaUrl | object || null | null | Accepts an object with a list of product URLs |
positions | object || null | null | Accepts an object with a list of variant positions |
import PIPProductSection from '@components/PIPProductSection';
<PIPProductSection snaUrl={object of URLs} rowCounts="no. of columns" customImages={object of images to replace fetched ones} swatch={true || false} seeMoreBtnText="text for see more section" seeMoreBtnUrlText="text for see more button" seeMoreUrl="link to open on click" isSlider={true || false} />
Name | Type | Default | Description |
---|---|---|---|
snaUrl | object || null | null | Accepts an object with a list of product URLs |
rowCounts | number | 3 | add no. of columns you need |
customImages | object || null | null | Accepts an object with a list of product images |
swatch | boolean | false | Swatches are visible if true |
seeMoreBtnText | string | default value | Add text for see more section |
seeMoreBtnUrlText | string | default value | Add text for see more button |
seeMoreUrl | string | default value | Add link to open on click |
isSlider | boolean | false | Transforms to a slider in mobile |
import PIPSection from '@components/PIPSection';
<PIPSection 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} />
Name | Type | Default | Description |
---|---|---|---|
snaUrl | object | null | Accepts an object with a list of product URLs |
rowCounts | number | 3 | add no. of columns you need |
customImages | object || null | null | Accepts an object with a list of product images |
swatch | boolean | false | Swatches are visible if true |
seeMoreBtn | boolean | false | Adds a See More Products div to the grid |
isSlider | boolean | false | Transforms to a slider in mobile |
includeIds | object | null | Accepts an object with a list of product ids to fetch |
excludeIds | object | null | Accepts an object with a list of product ids to not fetch |
import PIPPrice from "@components/PIPPrice";
<PIPPrice snaUrl={url of a single product} comparePrice={true || false} loading={true || false} />
Name | Type | Default | Description |
---|---|---|---|
snaUrl | object | null | Accepts an object with a product URLs |
comparePrice | boolean | false | Compare price is visible if true |
loading | boolean | false | Shows loading animation whwn product is loading |
import PIPSKUSection from '@components/PIPSKUSection';
<PIPSKUSection SKU={object of SKUs of a single product} rowCounts="no. of columns" customImages={object of images to replace fetched ones} swatch={true || false} seeMoreBtnText="text for see more section" seeMoreBtnUrlText="text for see more button" isSlider={true || false} />
Name | Type | Default | Description |
---|---|---|---|
SKU | object || null | null | Accepts an object with a list of product SKUs |
rowCounts | number | 3 | add no. of columns you need |
customImages | object || null | null | Accepts an object with a list of product images |
swatch | boolean | false | Swatches are visible if true |
seeMoreBtnText | string | default value | Add text for see more section |
seeMoreBtnUrlText | string | default value | Add text for see more button |
isSlider | boolean | false | Transforms to a slider in mobile |
import ReadyToBuild from "@components/ReadyToBuild";
<ReadyToBuild // no props />
What Our Customers Say
We aim to provide the best products for garage organization but don't just take our word for it. Here is what our customers have to say.
import ReviewSlider from "@components/ReviewSlider";
<ReviewSlider items={object of icons and text} bgDark={true || false} mainHeading="change section heading" />
Name | Type | Default | Description |
---|---|---|---|
items | object | null | Accepts an object with an array of icons and text |
bgDark | boolean | false | Changes component variant to black |
mainHeading | string | null | Change section heading |
import Service from '@components/Service';
<Service items={object of icons and text} bgDark={true || false} mainHeading="change section heading" />
Name | Type | Default | Description |
---|---|---|---|
items | object | null | Accepts an object with an array of icons and text |
bgDark | boolean | false | Changes component variant to black |
mainHeading | string | null | Change section heading |
Videos, installation guides,
product expert advice and more
Choose Curbside or White
Glove delivery of your new set.
Step-by-step measuring instructions. Or arrange for our pros to handle it for you.
import ServiceDesign from '@components/ServiceDesign';
<Service items={object of icons and text} bgDark={true || false} mainHeading="change section heading" />
Name | Type | Default | Description |
---|---|---|---|
items | object | null | Accepts an object with an array of icons and text |
bgDark | boolean | false | Changes component variant to black |
mainHeading | string | null | Change section heading |
import SliderPopUp from "@components/SliderPopUp";
<SliderPopUp slideItems={object with an array of objects with slide image's src , height, width} popUpItems={object with an array of objects with popup image's src , height, width} showPopUp={true || false} dots={true || false} arrows={true || false} />
Name | Type | Default | Description |
---|---|---|---|
slideItems | object | null | Images in the slider |
popUpItems | object | null | Popup images |
showPopUp | boolean | true | use false to make popup not visible |
dots | boolean | false | use true to make dots visible |
arrows | boolean | false | use true to make arrows visible |
We're here to support you
Get the products you need to complete your renovation now and pay for them overtime, at your convenience.
import SupportGrid from "@components/SupportGrid";
<SupportGrid />
import VideoModal from "@components/VideoModal";
<VideoModal src="add thumbnail URL" width="add thumbnail width" height="add thumbnail height" videoModalId="add vimeo video id" playIcon={use to change play icon and it's properties} />
Name | Type | Default | Description |
---|---|---|---|
src | string | null | Accepts thumbnail image URL |
width | string | null | Change thumbnail width |
height | string | null | Change thumbnail height |
videoModalId | string | null | Accepts Vimeo video id |
playIcon | object | false | Used to change play-icon and it's properties |
Convenient Curbside Delivery
By choosing Curbside Delivery, you’ll be notified when your order is ready to ship. We’ll call you to book a Delivery Appointment 1 week ahead of your product delivery.
Learn Moreimport WhiteGlove from "@components/WhiteGlove";
<WhiteGlove mainHeading={String of Heading} desc={String of description} url={String of link} />
Name | Type | Default | Description |
---|---|---|---|
main heading | string | true | Displays a main heading |
desc | string | true | Displays sub heading |
url | string | true | Accepts the url in string format |
import YMABIICustomSwatches from "@components/YMABIICustomSwatches";
<YMABIICustomSwatches snaUrl={object with an array of product json URLs} swatch={true || false} customImages={object with an array of custom images for the displayed products} positions={used to filter product variants} />
Name | Type | Default | Description |
---|---|---|---|
snaUrl | object | null | Accepts an object with an array of product json URLs |
swatch | boolean | true | Displays variant swatches if true |
customImages | object | null | Accepts an object with an array of custom images for the displayed products |
positions | object | null | Accepts an object with an array of positions to filter selective product variants to display |
import YMABIISlider from '@components/YMABIISlider';
<YMABIISlider items={object with an array of images, button links, heading} arrows={true || false} />
Name | Type | Default | Description |
---|---|---|---|
items | object | null | Accepts an object with an array of images, button links, heading |
arrows | boolean | true | Displays slider navigation arrows, if true |
import YMABIISKU from "@components/YMABIISKU";
<YMABIISKU SKU={array of SKU's} swatch={true || false} customImages={object with an array of custom images for the displayed products} customTitles={object with an array of custom Titles for the displayed products} isSlider={true || false} />
Name | Type | Default | Description |
---|---|---|---|
SKU | object | null | Accepts an object with an array of product SKU's |
swatch | boolean | true | Displays variant swatches if true |
customImages | object | null | Accepts an object with an array of custom images for the displayed products |
customImages | object | null | Accepts an object with an array of custom titles for the displayed products |
import YMABIIProducts from '@components/YMABIIProducts';
<YMABIIProducts snaUrl={object with an array of product json URLs} swatch={true || false} customImages={object with an array of custom images for the displayed products} positions={used to filter product variants} />
Name | Type | Default | Description |
---|---|---|---|
snaUrl | object | null | Accepts an object with an array of product json URLs |
swatch | boolean | true | Displays variant swatches if true |
customImages | object | null | Accepts an object with an array of custom images for the displayed products |
positions | object | null | Accepts an object with an array of positions to filter selective product variants to display |