Chat with us
Get in touch and let us know how we can help.
1-on-1 Live Support
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 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 |
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 |
Choose a seat cushion color and frame material to create your perfect match.
Choose a seat cushion color and frame material to create your perfect match.
Frame Finish
Cushion color
Order samples to preview materials in person before you purchase for best experience.
ORDER OUTDOOR FURNITURE SAMPLESimport LeftRightPIP from '@components/LeftRightPIP';
<LeftRightPIP 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 ReadyToBuild from "@components/ReadyToBuild";
<ReadyToBuild // no props />
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 |
Try our award-winning FREE Design Services.
Choose our Delivery Service for a simplified, worry-free experience.
Easily get your products installed by our professional experts.
Installation manuals and product support videos.
import NewServiceSection from '@components/NewServiceSection';
<NewServiceSection 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 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 |
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 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 |