shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show what buyers said without leaving the tile with this reviews product card for React with React Aria. A hairline frame with a plus mark on each corner holds three teapots between shared hairlines. Each tile has the drawn pot, its name, a fact, read-only Rating stars with "4.6 (212)" as a Button and the price. Press the rating and the tile turns over to three one-line reviews, each with stars and the shopper's initials in an Avatar, and a "Back to the pot" button. Both faces share one height, so the row never moves, and the face that is hidden cannot be tabbed to. Add turns into "Added" with an Undo, the heading row counts the "Bag" and a polite status line says what changed. On a phone the three tiles are a snap row with the next tile peeking. Guides rule the bands. For product ranges where a shopper wants a quick read of the reviews before choosing a size.
FAQ
How do I change the pots and the reviews?
Edit POTS. Each pot has an id, a name, a short meta line, the price in cents, an average in tenths with a reviewCount, an alt sentence, the shapes that draw it and a list of reviews, each with the shopper's initials, a line and a star count. Prices go through one money helper.
How does the tile turn over?
Both faces sit in one grid cell and the one that is not showing is invisible and inert, so it takes no focus and is not read. The change is a short fade, which is switched off when the visitor prefers reduced motion. Focus moves to "Back to the pot" when the tile turns, and back to the rating when it returns.
Are the scores and reviews real?
No. They are typed for the demo and the status line says so. The tile shows an aggregate and three short lines; the rating breakdown, votes and helpful counts belong in a reviews block.
What stays local, and how do I wire it for real?
The turned tiles 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 each pot's reviews from your reviews service when the tile first turns. The pictures are typed shapes: swap Picture for an img of each pot.
How does it look on a phone?
The tiles form a snap row that scrolls sideways inside its band, with the next tile peeking so it is clear there is more. The row can be focused and scrolled with the arrow keys. Each tile keeps one height whichever face is showing.
Is it accessible?
The stars are decorative and the average and count are written beside them, with "out of 5" for screen readers. Each review reads as the shopper's initials, the stars and the line. The pictures are named images, the buttons name the pot they act on, and every change is announced by the polite status line.
