Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Repo File Search Tool AI Block for Radix UI

A repo search with real matching over five typed files: a query field, a Match case switch, file-type toggles, results grouped by file, and a preview that marks every match with Match 2 of 5 and previous and next.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people jump to the code an assistant found, with this repo search for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Grepbrook, a codebase search: the results sit at the start and the file beside them. The search is real. It counts every occurrence of your words in five typed files of a fictional billing app, with a Switch for Match case and a Toggle Group of file types. Results are grouped by file, each matching line is a button, and pressing one opens the file at that match, drawn inverted among the other marked matches. "Match 2 of 5" with previous and next steps through them, and so do Enter and Shift+Enter in the preview. A chip says what the assistant asked for. For code search, log viewers and any list that opens a document at a hit.

FAQ

What stays in the page, and how do I make it real?

The files are typed in the file, about 25 lines each, and the search over them is real: a plain, case-folded substring match, counted per file and per line. Nothing is indexed or sent. To wire it for real, replace FILES with the contents your search service returns and hitsOf with its results; the rest only needs a path, a line and a column.

How does the search treat my words?

As plain text, not a pattern: every occurrence of what you typed counts, ignoring case unless Match case is on. File types narrow the files; with none pressed all five are searched. The count line says how many matches in how many files.

How does it work from the keyboard?

Tab reaches the query, the switch, the types, the suggestions, the results and then the file. In the file, Enter goes to the next match and Shift+Enter to the previous one, wrapping around. The previous and next buttons do the same, and the status line reads "Match 2 of 5, line 14".

How does it look on a phone?

A Results and File switch in the top bar shows one pane at a time, and pressing a result opens the file at that match. The window keeps its height and only the panes scroll.

How are matches told apart without color?

Every match has a tinted background; the current one is inverted (the text color as its background) so it stands out in either theme. The line number and the Match n of m counter say the same in words.

Does it work in a right-to-left language?

The window's layout follows the direction, with the results pane at the start. File paths, code and line numbers stay left to right because they are code.

All 100 ai blocks