Grouped Results Blueprint
Global search panel in its open state with a query input, results grouped into Projects, People, and Documents, and a keyboard hint footer.
Global search panel in its open state with a query input, results grouped into Projects, People, and Documents, and a keyboard hint footer.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Grouped Results Blueprint shows the global search panel in its open state as static markup, no Radix portal involved. The query invoice sits in the input, and results fall into three labelled groups (Projects, People, Documents) with the matched substring highlighted in every title, the first project row preselected, and a keyboard hint footer.
Each group is its own small array, and a highlight helper splits every title around the query so the mark tint lands without touching the data. The per group counts and the view all footer are what make a capped result set feel complete.
Reach for this block when you need to show a grouped search result design in a static preview or documentation page; wire it to a real command palette or search endpoint that returns entities keyed by type.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace global search. Other grouped result sets:
Tip: cap each group to a few rows and lean on a view all link; a flat list of everything buries the best match.