Related Products Peek

ProNew

Use this when a product page suggests more: a peeking row of product cards with rating, price and Add to cart, a polite cart count, and a final "See all" card that links to the full list.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

seeAllHref

Guide and examples

When to use it

Use it under a product or in a cart for four to ten suggestions, where each card can be added without leaving the page.

Do not use it as the only path to a catalogue. Always keep a visible link to the full list, and do not hide prices in the carousel.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`products`	`RelatedProduct[]`	`-`	Each has an id, name, price text, rating (0 to 5) and an image node.
`label`	`string`	`-`	Accessible name of the carousel.
`seeAllHref`	`string`	`-`	Where the final "See all" card goes.
`onAdd`	`(product: RelatedProduct) => void`	`-`	Called when Add to cart is pressed.

Accessibility

The rating is an image role with a text value ("4.5 out of 5"), not a row of star glyphs.
The Add button names its product ("Add to cart: Canvas tote") and becomes a disabled "Added" state; the cart count is a polite live region.
The final card is a plain link, so the full list is one Tab away from the last product.
Keyboard: Tab: through products, then the See all link
Keyboard: Enter on Add to cart

Testing

The pattern ships with a Testing Library test (related-products-peek.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.