Look at me now

24in Home Bar Cabinets

Workbenches

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

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

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

Example Pages

24in Home Bar Cabinets

Workbenches

BannerSlider - Full width slider

import BannerSlider from "@components/BannerSlider";


  <BannerSlider
    dots={true || false}
    arrows={true || false}           
    children={add Images in child divs where each adjacent div is a single slide}         
  />

Props

Name	Type	Default	Description
dots	boolean	false	use true to make dots visible
arrows	boolean	false	use true to make arrows visible
children	JSX Element	null	Add slides using child divs

Example Pages

Recipes

About Us

BannerSwatch - Banner changes on swatch click

import BannerSwatch from "@components/BannerSwatch";


  <BannerSwatch
    heading ="proper heading of the products"
    description = "proper descriptions of the products"         
  />

Props

Name	Type	Default	Description
heading	string	true	proper heading of the products
description	string	true	proper descriptions of the products

Example Pages

21in-home-bar-cabinets

24in-home-bar-cabinets

BannerTag - A sub-component to mostly parent components(like HeroBanner, BannerSlider etc.)

import BannerTag from "@components/BannerTag";


  <BannerTag 
    position={tagPosition}
    content="tag text"
    link="tag link url"
    src="change tag icon by entering url of image"
    isFeature={true || false}
  />

Props

Name	Type	Default	Description
position	object	null	Accepts an object with top, left, right and bottom to define position of particular Tag
content	string	Test	Enter tag text
link	string	null	Enter tag link url
src	string	tag image url	Used to change tag icon image. Pass url of new image
isFeature	boolean	false	Used to change tag icon to a plus icon

Example Pages

Workbenches(feature-icon)

Infrared Heaters

BannerToolkit - A sub-component to HeroBanner. Only Used in kitchen pages as of now.

import BannerToolkit from "@components/BannerToolkit";


  <BannerToolkit 
    toolkitImg="image url"
    toolkitHead="heading text"
    toolkitBtnText="button text"
    toolkitSrc="button url"
    toolkitDesc="description"
  />

Props

Name	Type	Default	Description
toolkitImg	string	default img	Used to change image by passing new image url
toolkitHead	string	default heading	Used to change heading
toolkitBtnText	string	default button text	Used to change btn text
toolkitSrc	string	default url	Used to change button url
toolkitDesc	string	default description	Used to change description

Example Pages

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

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

Name	Type	Default	Description
compare_heading	string	null	Use for giving proper heading
compare_description	string	null	Use for giving proper Description
hasTitle	boolean	true	{True \|\| False}
CompareItems	string	null	[]
CompareItemsMob	string	null	compare items for mobile
snaUrls	string	null	Adding 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

Name	Type	Default	Description
src1	string	null	Add url of left hand side img
src2	string	null	Add url of right hand side img
mobileSrc1	string	null	Add url of left hand side img for mobile (below 767px)
mobileSrc2	string	null	Add url of right hand side img for mobile (below 767px)
altTextLeft	string	null	Add alt text for left hand side image
altTextRight	string	null	Add 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

Name	Type	Default	Description
data	string	default heading	collections of data
loading	string	false	to 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

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

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

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

Example Pages

21in-home-bar-cabinets

BuyMoreSaveMore - Used to add Buy More Save More offer Banner

BOOK YOUR VIRTUAL DESIGN CONSULTATION NOW

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

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

Example Pages

Luxury Vinyl Plank

View Before & After Gallery

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.

Explore Our Products

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

Browse Products

import 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}
  />

Props

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

Example Pages

Design Services

Gallery - Masonry Gallery Component with PopUp Slider options

import Gallery from "@components/Gallery";


  <Gallery 
    caption={true || false}
    showPopUp={true || false}
    zoomOnHover={true || false}
    items={passObject}
    popUpItems={passPopupImages}
  />

Props

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

Example Pages

PVC Slatwall

Workbenches

ImageToggler - Used to compare two images using a toggle switch

3D Render

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}
  />

Props

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

Example Pages

Flooring

Wall Mounted Racks

InspirationIsRightHere - Used in Kitchen Pages at the bottom sections

Inspiration is right here

From traditional to cool and contemporary, our countertops make a style statement in your custom kitchen.

Rustic Farmhouse Kitchen

import InspirationIsRightHere from '@components/InspirationIsRightHere';


  <InspirationIsRightHere 
    //no props
  />

Example Pages

Kitchen Faucets

Jumbotron - Container usually used for section Headings or colored text banners

Styles to suit your taste

Whether you opt for understated with our Standard Sink or stand-out with the large farmhouse offering, we have a style of sink to suit your kitchen.

Look at me now

import Jumbotron from '@components/Jumbotron';


  <Jumbotron 
    bg="change background color"
    padding="change padding"
  />

Props

Name	Type	Default	Description
bg	string	default heading	Used to change background color
padding	string	default discount	Used to change padding

Example Pages

Kitchen Faucets

LetsDesign - Used for two columned sections where one side is an image

Let’s design it together

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.

Schedule Appointment now

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/"
      />

Props

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

Example Pages

Luxury Vinyl Plank

Natural Stacked Stone

LeftRightBanner - Used for two columned sections where one side is an image

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}
  />

Props

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

Example Pages

Kitchen Cabinets

NAPButton - Used to add buttons having NAP default design

Primary secondary ghost link link-light outlined video

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"
  />

Props

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

MultiRowItems - Used to place images in multiple rows along with text and links

Compact and Versatile

Bold Series Cabinets ›

Beautiful and Resilient

Luxury Vinyl Planks ›

Durable and Functional

Adjustable Height Workbench ›

Tasteful and Inspiring

Kitchen Solutions ›

Compact and Versatile

Bold Series Cabinets ›

import MultiRowItems from '@components/MultiRowItems';


  <MultiRowItems>
    {children}
  </MultiRowItems>

Props

Name	Type	Default	Description
children	Element	null	Items to be rendered

NAP Form Components - Used to build NAP forms as per the design system

CheckBox

Click Me!

Dropdown

EmailField

Email

FileUploadButton

InputField

Input Field

NumberField

Phone

PasswordField

Password

Must be atleast 8 character,1 letter,1 number

RadioButton

Click Me!

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" />

Please check the following pages for validation and form submit methods -

NAPSlider - Slider component to be used as a wrapper to generate a slider of items

import NAPSlider from "@components/NAPTemplates/NAPSlider";


  <NAPSlider 
    children={add child divs}
    fullWidth={true || false}
    dots={true || false}
    arrows={true || false}
    centerMode={true || false}
  />

Props

Name	Type	Default	Description
children	Element	null	Items to be rendered
fullWidth	Element	false	Generates a full-width slider when true
dots	Element	true	Generates dots to navigate below the slider when true
arrows	Element	true	Generates arrows to navigate across the slider when true
centerMode	Element	false	Generates a centered slider when true

Example Pages

PIP Test

NAPGrid - Grid component to be used as a wrapper for 3 or 4 column grids

import NAPGrid from "@components/NAPTemplates/NAPGrid";


  <NAPGrid 
    children={add child divs}
    col={number}
    mobileSlider={true || false}
  />

Props

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

Example Pages

PIP Test

PIPSKU - This is the default PIP component to be used across all pages

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}
  />

Props

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

Example Pages

PIP Test

PIPPositionFilter - PIP component to be only used in cases where particular variants are to be picked up

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} />
  />

Props

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

Example Pages

Kitchen Organization

PIPProductSection - Used to fetch products with their individual URLs

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}
  />

Props

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

Example Pages

Slatwall

Outdoor Kitchen Countertops

Steel Slatwall

PIPSection - Used to fetch products with their collection URLs

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}
  />

Props

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

Example Pages

Infrared Heater

Shop All Kitchen

PIPPrice - PIPPrice component is used to display product price.

Coming Soon Coming Soon Coming Soon

Coming Soon

import PIPPrice from "@components/PIPPrice";


  <PIPPrice 
    snaUrl={url of a single product} 
    comparePrice={true || false}
    loading={true || false}
  />

Props

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

Example Pages

Dual side burner

PIPSKUSection - Used to fetch products with their individual SKUs

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}
  />

Props

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

Example Pages

Slatwall

Garage Storage Cabinets Bold

Steel Slatwall

ProductSlider - Slider that fetches product data from SNA

import ProductSlider from "@components/ProductSlider";


  <ProductSlider
    snaUrl={object of URLs}
    customImages={object of images to replace fetched ones}
    swatch={true || false}
  />

Props

Name	Type	Default	Description
snaUrl	object	null	Accepts an object with a list of product URLs
customImages	object \|\| null	null	Accepts an object with a list of product images
swatch	boolean	false	Swatches are visible if true

Example Pages

Laundry Room Cabinets

Outdoor Kitchen Cabinets Aluminum

ReadyToBuild - Component mostly used in Kitchen Pages.

Ready to start building your kitchen?

Shop on your own or reach out to one of our Kitchen Design Experts. We are here to help.

Plan your kitchen online from the comfort of home. If you know what you want, start by creating an item list in your shopping cart!

Our Kitchen Design Experts can help you create your dream kitchen based on your needs, style, and budget.

FREE DESIGN CONSULTATION

Plan your kitchen online from the comfort of home. If you know what you want, start by creating an item list in your shopping cart!

Plan your kitchen online from the comfort of home. If you know what you want, start by creating an item list in your shopping cart!

Our Kitchen Design Experts can help you create your dream kitchen based on your needs, style, and budget.

FREE DESIGN CONSULTATION

Plan your kitchen online from the comfort of home. If you know what you want, start by creating an item list in your shopping cart!

import ReadyToBuild from "@components/ReadyToBuild";


  <ReadyToBuild 
    // no props
  />

Example Pages

Kitchen Lighting

RelatedSearch - Used to display related pages which is usually placed near the footer.

import RelatedSearch from "@components/RelatedSearch";


  <RelatedSearch 
    items={object of url and button text}
    buttonText="add single blue cta text"
    buttonVisible={true || false}
    singleCtaLink="single blue cta link"
  />

Props

Name	Type	Default	Description
items	object	null	Accepts an object with an array of URLs and button text
buttonText	string	null	Used to add text for the single blue button below title
buttonVisible	boolean	false	Single blue cta is visible if true
singleCtaLink	string	null	Used to add URL for the single blue button below title

Example Pages

ReviewSlider - Used to add the common Service Section

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.

This is a great quality product. Absolutely love this new addition to my garage!

DARS - Toronto

We bought this as part of a set we purchased and love the quality! They're heavy duty and work well for our storage.

STEPH - Iowa

This piece was an add on to a 7 piece set I previously installed in my garage! Sturdy, functional and beautiful! I no longer cringe when pulling into my garage! I love it!

LEE - Pennsylvania

import ReviewSlider from "@components/ReviewSlider";


  <ReviewSlider 
   items={object of icons and text}
   bgDark={true || false}
   mainHeading="change section heading"
  />

Props

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

Example Pages

Service - Used to add the common Service Section

We can help you design, plan and install your purchase.

DIY Support

Videos, installation guides,
product expert advice and more

Delivery

Choose Curbside or White
Glove delivery of your new set.

Installation

Step-by-step measuring instructions. Or arrange for our pros to handle it for you.

DIY Support

Videos, installation guides,
product expert advice and more

We can help you design, plan and install your purchase.

DIY Support

Videos, installation guides,
product expert advice and more

Delivery

Choose Curbside or White
Glove delivery of your new set.

Installation

Step-by-step measuring instructions. Or arrange for our pros to handle it for you.

DIY Support

Videos, installation guides,
product expert advice and more

import Service from '@components/Service';


  <Service 
   items={object of icons and text}
   bgDark={true || false}
   mainHeading="change section heading"
  />

Props

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

Example Pages

Service Design - Used to add the common Service Section

We can help you design, plan and install your purchase.

DIY Support

Videos, installation guides,
product expert advice and more

Delivery

Choose Curbside or White
Glove delivery of your new set.

Installation

Step-by-step measuring instructions. Or arrange for our pros to handle it for you.

DIY Support

Videos, installation guides,
product expert advice and more

import ServiceDesign from '@components/ServiceDesign';


  <Service 
   items={object of icons and text}
   bgDark={true || false}
   mainHeading="change section heading"
  />

Props

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

Example Pages

Garage Storage Overehead Racks

Slider Popup - Slider with popup's for each slide

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}
  />

Props

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

Example Pages

21 in home bar cabinets

SupportGrid - Grid component with links to service pages

We're here to support you

Virtual Consultations

Start creating with our award-winning design professionals today!

Trade Program

Learn more about our Trade Program and how we can simplify your developments.

Financing

Get the products you need to complete your renovation now and pay for them overtime, at your convenience.

Experience Center

Get the full experience of a showroom from the comfort of your home.

Virtual Consultations

Start creating with our award-winning design professionals today!

import SupportGrid from "@components/SupportGrid";


  <SupportGrid />

Props

Example Pages

Support FAQ

Support Hub

Support

SwatchSlider - Mostly used in older pages. Has option to add swatches to slider and change image on swatch click.

Heavy-Duty Welded Steel Frames

Spacious Storage

import SwatchSlider from '@components/SwatchSlider';


  <SwatchSlider 
    items={object of images and text}
    showPopUp={true || false}
    dots={true || false}
    arrows={true || false}
    setting={used to change slider settings}
  />

Props

Name	Type	Default	Description
items	object	null	Accepts an object with an array of images and text
showPopUp	boolean	false	Displays a popup on click, if true
dots	boolean	false	Displays slider navigation dots, if true
arrows	boolean	false	Displays slider navigation arrows, if true
setting	object	false	Used to change slider settings

Example Pages

Garage Cabinets Pro Series

Outdoor Kitchen Countertops

SyncSlide - One Slider's navigation is linked to another using this component. Currently only used in Outdoor Cabinets Stainless Steel

Outdoor Kitchen Aluminum Cabinets Reviews

WHAT SETS US APART

Trust

More than 35,000 customers praise our brand in reviews and trust us in their home

import SyncSlide from '@components/SyncSlide';


  <SyncSlide 
   // no props
  />

Example Pages

Outdoor Kitchen Cabinets Stainless Steel

VideoModal - Displays a thumbnail with a play icon and pops up a video modal on click

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}
  />

Props

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

Example Pages

Support Hub

Track Shipment

VideoSlider - A Slider consisting of multiple VideoModals

import VideoSlider from '@components/VideoSlider';


  <VideoSlider 
    dots={true || false}
    setting={object to change slider settings}
    arrows={true || false}
    items={object of an array of thumbnail URLs and vimeo ids}
  />

Props

Name	Type	Default	Description
items	object	null	Accepts an object with an array of thumbnail URLs and vimeo ids
dots	boolean	false	Displays slider navigation dots, if true
arrows	boolean	false	Displays slider navigation arrows, if true
setting	object	false	Used to change slider settings

Example Pages

Garage Cabinets Pro Series

Outdoor Kitchen Cabinets Aluminum

White Glove

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 More

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 More

import WhiteGlove from "@components/WhiteGlove";


  <WhiteGlove 
    mainHeading={String of Heading}
    desc={String of description}
    url={String of link}
  />

Props

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

Example Pages

Kitchen Countertops

Natural Stacked Stone

Delivery Services

YMABIICustomSwatches - Common Section where we display related products and their data from SNA

You May Also Be Interested In

SEE ALL KITCHEN PRODUCTS

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}
  />

Props

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

Example Pages

Kitchen Millwork

Kitchen Organization

YMABIISlider - Common Section where we display related page links alongwith images. It has two versions - one static and another slider if slide-items more than 4.

Coming Soon

Button

import YMABIISlider from '@components/YMABIISlider';


  <YMABIISlider 
    items={object with an array of images, button links, heading}
    arrows={true || false}
  />

Props

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

Example Pages

Luxury Vinyl Plank

Linkable Shop Lights

PVC Slatwall

YMABIISKU - Common Section where we display related products and their data from SNA

You may also be interested in

SEE ALL KITCHEN PRODUCTS

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}
  />

Props

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

Example Pages

YMABIIProducts - Common Section where we display related products and their data from SNA

You may also be interested in

SEE ALL KITCHEN 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}
  />

Props

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

Example Pages