shadcn.io is not affiliated with official shadcn/ui
Gift Finder Storefront Block for React Aria
A five-question gift quiz (who, occasion, budget, style, wrapping) with a progress bar, Back that keeps your answers, and the three typed gifts that match most of your answers, each marked Matches 3 of your 4 answers with the words that matched.
Installation
Overview
Help someone choose, with this gift finder for React with React Aria. A header says what Pinfeather asks. A hairline frame with a plus mark on each corner opens with the question and a thin meter reading "Question 2 of 5", then the answers as native radio rows (so the arrow keys move the choice), then an action foot with a status line, Back and Next. Next is blocked until a question has an answer and says so; on the last question it becomes the block's one Shine Button, See picks. The answers to who, occasion, budget and style are matched to typed gifts by shared tags: a gift scores one for each answer it satisfies, the budget being worked out from its price, and the three best (ties to the lower price) appear as "Matches 3 of your 4 answers" with the words that matched. There are no percentages. The fifth answer, wrapping, adds its price in whole cents. Start again clears the answers. The questions and the results share one grid cell, so the panel keeps its height. It's built from Button, Shine Button and Guides, with a CSS entrance only. For a gift guide, a holiday landing page or a shop with a large range.
FAQ
How do I fill it with my own gifts and questions?
Edit QUESTIONS and GIFTS. A gift has a price in cents and the tags who, occasion and style; budget is not typed, it is worked out from the price by budgetOf. The first four questions score, the last adds cents to the price. If you change a question's id, add a case to tagsOf.
How are the picks chosen?
Each gift is scored by counting how many of your four answers appear in its tags. The top three are shown, ties going to the lower price and then the name. If nothing matches exactly the picks still show, saying "Matches 0 of your 4 answers", rather than an empty list.
Why no match percentages?
Because a percentage would be an invented precision. A count of shared answers can be checked by looking at the tags, so the block says "3 of your 4" and lists them.
What stays local, and how do I wire it to real data?
The answers, the picks and the bag count live in the page; nothing is sent or bought. To use a catalog, load your products with their tags into GIFTS, or call your search with the four answers inside picksOf, and add to your cart in add.