Product Showcase Carousel for React

For a short, picked set of 5 to 12 items, such as deals or recommendations, where you lead the eye one product at a time. When people need to compare prices or filter, a grid works better.

Replace the products array: each entry has a name, price, rating, reviews and a badge that can be null. Swap the placeholder image src for each product's photo, and keep alt set to the product's name.

Five StarIcons. A star is fill-primary text-primary when its number is at most the rating rounded down, and fill-muted text-muted otherwise, so 4.6 shows four stars. The rating and the review count follow as text, which is what a screen reader reads.

When the product's badge is set. It's a Badge with absolute end-4 top-4 in the image's corner, and a null badge renders nothing.

Give CarouselItem a width class such as basis-1/2, and widen the wrapper from max-w-sm.

Give the button a click handler that adds the product to your cart state or calls your API. The demo has none. Confirm the action with a toast or by changing the label to Added.