shadcn.io is not affiliated with official shadcn/ui
Product Showcase Carousel Block for React
Eight drawn homeware pieces with prices and an Add button on a hairline track inside a frame you can set to phone, tablet or desktop width, so the number of pieces in view follows the frame instead of the screen.
Installation
Overview
Preview how a shelf of products behaves at different widths without leaving the page, with this product showcase carousel for React with Base UI. Hollowfield, a homeware shop, shows eight drawn pieces (a mug, a lamp, a stool, a jug, a throw, a vase, a basket and a clock) in a framed track, each cell with the name, the price and an Add Button. A Toggle Group in the header sets the frame to Phone, Tablet or Desktop, and the frame narrows in place; because the cells are sized by container queries on the frame and not by the screen, the frame decides how many fit: one with the next peeking at the edge, two, or four. A caption under it states the frame's measured width and what that shows. The foot band, ruled by Guides, holds the counter, the bag count that Add raises, a dot for each page and Previous and Next buttons. A phone has no control, because the page is already the phone. It's built from Carousel, Toggle Group, Button and Guides, with CSS transitions only. The shop, the pieces and the prices are made up for the example.
FAQ
How do I list my own products?
Edit PIECES. Each has an id, a name, a price in cents and a kind that picks its drawing. Prices go through one formatter, so $28 and $28.50 both read right. For photographs, replace Drawing in the cell with an img (the comment above it says how); the picture area has one fixed height, so the shelf never changes height when the frame does.
How does the frame, and not the screen, decide how many fit?
The frame is a container, and the cells are sized by queries on its width: under 40rem one piece shows at 87% with the next peeking, from 40rem two, from 52rem four. The caption reads the frame's real width, so on a narrow window the Desktop frame honestly shows fewer pieces than on a wide one. The cells' basis classes are container queries, and Embla re-measures when the frame resizes.
What does Add do?
In the example it counts: each press raises "Bag" in the foot, which is the block's one live region, so a screen reader hears "Bag: 2" along with the counter. Nothing is stored or sent. Replace the handler with your own add-to-cart call and keep the count in the foot from your cart.
How does it work with a keyboard?
Tab reaches the preview control, then Add on each piece in view, the dots, Previous and Next. With focus on the buttons or dots the arrow keys move the track (mirrored in a right-to-left layout), and Home and End jump to the first and last page. Pieces that are out of view are hidden from the tab order and from screen readers, and Previous and Next stay in the tab order at the ends.