shadcn.io is not affiliated with official shadcn/ui
Recent Orders Social Proof Storefront Block for Radix UI
A recent-orders panel for a hi-fi shop with three figures worked out from six sample orders and a privacy dial that rewrites every line as name and town, first name, initials or hidden.
Installation
Overview
Show that people are buying without pretending the page is live, with this recent-orders panel for React with Radix UI. A header names the list and says what Cobbett, a hi-fi shop, sells. A hairline frame with a plus mark on each corner holds three figures (orders this week, repeat buyers, towns) worked out from the six typed orders, a Toggle Group that sets how buyers appear, and the orders as a list. The dial has four settings, Name and town, First name only, Initials only and Hidden, and choosing one rewrites every line on the press; Hidden leaves the product, the date and the price and no person at all. A status line says what the dial is set to and that these are sample orders, not live ones, with the date they are as of. There is no viewer count, no clock and no "bought just now". It's built from Toggle Group, Guides and initials avatars, with a CSS entrance only. For a product page or a shop front that wants honest social proof.
FAQ
How do I use my own orders?
Edit ORDERS. Each has an id, a first name, a last name, a town, the product, a price in cents, an ISO date and a repeat flag. The three figures are derived: an order counts as this week when its date is less than seven days before AS_OF, repeat buyers are the flagged ones, and towns are counted without duplicates.
Why a privacy dial?
Showing a buyer's name and town is a choice, and shoppers and shops differ on it. The dial lets you preview each level and ship the one your privacy policy allows; you can remove the control and fix the level in useState.
What stays local, and how do I wire it to real orders?
The orders are samples typed in the file and the date is fixed (the block says it is as of 9 October 2026). For a live version, read recent orders from your store on the server, drop names you have no consent to show, and replace ORDERS. Nothing here counts viewers or reads a clock.
What does Hidden show?
Only the product, the date and the price, under a neutral person icon and the words "A customer". The three figures stay, because they are counts.