shadcn.io is not affiliated with official shadcn/ui
Pinned Featured Reviews Block for React Aria
Three numbered pin slots for a bookshelf's reviews: pin from a list, move a pin up or down, unpin it, or replace a full slot through a Select.
Installation
Overview
Pinned featured reviews for React with React Aria, for the Holmfold Stack 5, a fictional bookshelf. A header with the title and one sentence sits over a split behind a divider. At the start, three numbered slots as an ordered list: a pinned review shows its number, stars, title and reviewer with Up, Down and Unpin buttons, and an empty slot says so. At the end, all seven reviews as ruled rows, each with a Pin button. A review that is pinned leaves a quiet line ("Pinned in slot 2") in its row, so the list never moves. When all three slots are full the Pin buttons say "Slots full" and a Select above the list asks which slot the next pin replaces; after you choose one, every row's button reads "Replace slot 2". A polite line under the slots says each change, and focus follows the button you used. Nothing is saved: the order lives on the page until it reloads. Stars are the read-only Rating in your theme's text colour, with the value in words beside them. All seven reviews are typed at the top of the file. It's built from Button, Select, Badge, Rating, Avatar and Guides.
FAQ
How do I use my own reviews and my own limit?
Replace REVIEWS at the top of the file, newest first (each has an id, name, rating, ISO date, title, body and verified), and set START to the ids that begin pinned. The limit is SLOT_COUNT; the slot numbers and the Select's options come from SLOT_NUMBERS, so change both together for four slots.
Is the pinned order saved anywhere?
No. It is local state: pinning, moving and unpinning change the lists and a polite line says what changed, but nothing is sent and a reload starts again from START. To keep it, send the pins array to your own endpoint from the handlers.
What happens when all three slots are full?
The Pin buttons wait ("Slots full") and a Select replaces the "slots free" note above the list. Choose Slot 1, 2 or 3 and every row's button reads "Replace slot N"; press one and that review takes the slot, while the review it replaced goes back into the list. Unpinning, moving or choosing a slot again clears or changes the choice.
Where does focus go after a move?
To the button you just used, or its neighbour when that button has reached an end and is disabled: after Unpin, to that review's Pin button in the list; after a Pin, to its Unpin button in the slots. Every button is a real button with a name that includes the review's title, so a screen reader hears what it acts on.
React Aria buttons take isDisabled and onPress; the focus handling is the same.