shadcn.io is not affiliated with official shadcn/ui
RAG Search AI Block for React Aria
A search that answers and shows its passages: three sample searches over a typed handbook, passages ranked by how many typed terms they hold, and an answer whose citations follow a Passages used slider.
Installation
Overview
Show the evidence next to the answer, with this retrieval search for React with React Aria. A compact header names Passagebrook, a policy search, and a hairline frame with a plus mark on each corner holds a large Input with the Shine Button, the only colored control, and three sample chips: refund window, data retention and SSO setup. A search shows a Skeleton for 400 ms, then the three best passages from a typed twelve-passage handbook at the start, ranked 1st to 3rd by how many of the sample's typed terms each one holds ("Matches 6 of 6 terms"), with those words marked in the excerpt, and the answer at the end with [1] [2] [3] chips that ring the passage they cite. A Slider, Passages used, from 1 to 3, decides how many passages the typed answer leans on, so it changes which sentences and chips show and which passages read "Used in the answer". A search that is not a sample finds the closest one by the words they share and says so; with nothing in common an Empty state shows. Guides draw the frame. For policy search, support tools and any answer that has to show its sources.
FAQ
What stays in the page, and how do I make it real?
Everything. The handbook, each sample's terms and the three answers are typed in the file; the ranking, the marked words and the closest-sample match are worked out in the tab from them. Nothing is searched on a server, retrieved or generated. To wire it for real, send the search to your index in search, rank by your own score, send the top passages to your model and keep the Segment shape (a sentence and the passage rank it cites) for the answer.
How are passages ranked?
Each sample carries six typed terms. A passage scores one for each term it holds (a plural s is ignored, so days meets day), the three highest are shown in that order with ties broken by the handbook's order, and "Matches 4 of 6 terms" is that score. It is a simple overlap count, not a model's relevance, and it is shown as a rank and a count, never as a percentage.
What happens if I type something else?
The words you type are compared with each sample's name and terms, and the sample with the most words in common is shown, with the note "Showing the closest sample: data retention". If nothing is shared, the empty state says so. The handbook only covers three topics, and the page says that.
What does the slider change?
It sets how many of the three passages the typed answer uses. At 1 the answer is one sentence with one chip; at 3 it has three. The passages below the number read "Not used", and a chip rings its passage in the list. The slider is named, reads "2 of 3" aloud and moves with the arrow keys.