shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Put a few buyers' words next to a product with this testimonials product card for React with Radix UI. A hairline frame with a plus mark on each corner holds one wide tile: the drawn greyscale bread bin with its name, read-only Rating stars, the price and an outline Button that says "Add to bag". In a side cell with a divider sits a Carousel of three customer lines, each one or two sentences with the shopper's initials in an Avatar and "Verified buyer". Previous and Next buttons, the arrow keys and a swipe on touch move through them, and a count reads "1 of 3". There is no autoplay, so nothing moves unless you move it. Add turns into "Added" with an Undo and a polite status line says what changed. Nothing is stored or bought. Guides rule the bands. On a phone the quotes stack under the product. For product pages that want social proof beside the buy button.
FAQ
How do I change the quotes?
Edit QUOTES. Each has an id, the shopper's initials, a stars count and the text. The slide count follows the list, and the counter, the Previous and Next buttons and the status line are computed from it. The product itself is the constants above it (PRICE_CENTS, AVERAGE, RATINGS) and the BIN shapes.
Why does the carousel not advance on its own?
A timer that changes text under the reader is hard to read and needs a pause control. Here the visitor moves through the lines with the buttons, the arrow keys or a swipe, and the other lines are inert, so they cannot be reached by keyboard while hidden.
Are the quotes real?
No. They are typed for the demo and the status line says so. In a real shop, load quotes only from verified purchases and keep the "Verified buyer" words for those.
What stays local, and how do I wire it for real?
The chosen line and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart, and load QUOTES from your reviews service. The picture is typed shapes: swap Picture for an img of the product.
How does it look on a phone?
The product and the quotes stack, with the picture shortened. The carousel keeps one line per page, the buttons stay in reach under it and the quote area holds the height of the longest line so the controls do not jump.
Is it accessible?
The carousel is a named region and each slide is named "Customer line 1 of 3". The stars are decorative and the shopper's initials and star count are written for screen readers. Previous and Next are named buttons that say when they are at the end, and every change is announced by the polite status line.
