shadcn.io is not affiliated with official shadcn/ui
Search Header Sidebar Block for Radix UI
A research notebook in a fixed-height window whose top-bar search opens Recent and Suggested pages when empty and matching Pages and Actions as you type, with removable recents and a slash key to focus the field.
Installation
Overview
Search a notebook without leaving the page with this search header sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar for Sleuthbay, a research notebook, with ten pages in three groups, and a search field in the top bar. Focusing it opens an Autocomplete popup: with nothing typed, Recent lists three pages you opened from search before, each with a button to remove it, and Suggested lists four more. Typing swaps them for Pages and Actions that match, the matching letters marked, with the first match already highlighted so Enter opens it. Choosing a page opens it and moves it to the top of Recent; the two actions fold the sidebar or empty Recent. A slash focuses the field while focus is inside the window. The page lists the notebook page's notes. It's built from Sidebar, Autocomplete, Kbd, Search Highlight Text, Avatar and Guides, with a CSS entrance only. For notebooks, wikis and any app with many pages and a search that remembers.
FAQ
What does the popup show before I type?
Recent and Suggested. Recent holds up to three pages opened from search, newest first; choosing one moves it to the top, and a fourth pushes the oldest out. Suggested is up to four fixed picks that are not already in Recent. Opening a page from the sidebar does not change Recent, only search does.
How do I remove a recent page with the keyboard?
Highlight it with the arrow keys and press Shift with Delete. The small button in the row is for the mouse and has no tab stop, so the list stays one arrow-key sequence; the status line says what was removed. The Clear recent pages action empties the group in one go.
What do Enter and the actions do?
While you type, the first match is highlighted, so Enter opens it. Matching reads the page name and its group, ignoring case and accents. Actions appear when their name matches: Toggle sidebar folds or opens the rail, and Clear recent pages empties Recent. Escape closes the popup.
How does the slash key work?
A capture listener on the window's own element focuses the field when you press / and focus is inside the window but not in a text field. Nothing outside the window hears it, so it never takes the key from the page around it. The field carries aria-keyshortcuts and a visible hint that hides while you type.
What stays in the page, and how do I connect it?
Everything. The pages, the suggestions and the recents are typed in the file; nothing is searched on a server or saved, and a reload starts over. To make it real, replace the matching function with your search call and store Recent per person. The pages are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with asChild around an a element.