shadcn.io is not affiliated with official shadcn/ui
Personalized Storefront Block for React Aria
A picked-for-you shelf for an outdoor clothing shop: For you and Trending tabs, six drawn picks each with a reason line naming where it comes from, a Hide that brings the next pick in, and an Undo.
Installation
Overview
Show recommendations that explain themselves, with this picked for you shelf for React with React Aria. A header names Curlew Fell, an outdoor clothing shop, and promises a reason for every pick. A hairline frame with a plus mark on each corner has Tabs for For you and Trending and a count of what you hid. Each tab lists six drawn picks (a shell, a fleece, trousers, a hat, gloves, socks) with the price and one reason line that names the product it comes from, such as "Because you viewed the Alder fleece" or "Top seller this week: 312 sold". Hide removes a pick and the next typed pick slides in, so the list keeps six; the foot's Undo puts the last one back where it was, and focus moves to the pick that took its place. The rows have one fixed height and both tabs hold six, so neither switching tabs nor hiding moves the foot; hiding a whole tab shows an Empty state with a way back. It's built from Tabs, Button, Empty and Guides, with a CSS entrance only. For a home page, a product page or an account shelf.
FAQ
How do I fill it with my own picks?
Edit LINES. Each line is shelf|id|kind|name|cents|reason and the first six of each shelf that are not hidden are shown, so give each shelf a few spare lines. Write the reason from your own signal (a product viewed, a past order, a sales count) and name the product it refers to.
Does it learn anything about me?
No. The picks and reasons are typed samples, and the status line says nothing is learned here. In your shop, fill the shelves from your recommendation service and send each Hide back to it so the pick does not return.
What happens when I hide a pick?
It leaves the list, the next pick of that shelf takes the sixth place, the count of hidden picks goes up and the status line says what happened. Undo restores the last pick you hid in its old place. Hide all nine picks of a shelf and an empty state offers to show them again.
Why does the list not change height?
Every row is one fixed height with its text clamped, and the list keeps room for six rows, so switching tabs, hiding a pick or emptying a shelf never moves the foot.