Product Shelf

The ProductShelf is a compound of the following:

• ProductShelfItems: the product list.
• ProductShelfItem: wraps the product inside a list item.
• ProductCard: the proposed child of a ProductShelf.

Import

Import the component from @faststore/ui

import {
  ProductShelf,
  ProductShelfItems,
  ProductShelfItem,
} from '@faststore/ui'

We highly recommend using the ProductCard as the direct child of the ProductShelfItem.

import {
  ProductCard,
  ProductCardContent,
  ProductCardImage,
} from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/organisms/ProductShelf/styles.scss'

Usage

Props

All ProductShelf related components support all attributes also supported by their respective HTML tags. Besides those attributes, the following props are also supported:

Product Shelf

Product Shelf Items

Product Shelf Item

Design Tokens

Nested Elements

Items

Variants

You can use ProductCard variants to create ProductShelf variations.

With Button

Bordered

Aspect Ratio

With Carousel

Customization

data-fs-product-shelf

data-fs-product-shelf-items

data-fs-product-shelf-item

Best Practices

❌ Don'ts

• We don't recommend using Carousel inside ProductShelf when display 5 or less items.
• We don't recommend using ProductShelfItems and ProductShelfItem when using Carousel component to avoid: validateDOMNesting(...): <li> cannot appear as a descendant of <li> issue. See Carousel Code Example