A settings sidebar whose search folds away every page and section that does not match, also searching hidden keywords and showing which one matched. Enter opens the first hit and an empty search suggests terms.
API tokens
npx shadcn@latest add https://hyperblur.dev/r/sidebar-quick-find.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-quick-find.tsx.
import { SidebarQuickFind } from "@/components/hyperblur/sidebar-quick-find"
<SidebarQuickFind onChange={(id) => router.push(`/settings/${id}`)} />| Prop | Type | Default | Description |
|---|---|---|---|
| sections | { id: string; label: string; pages: { id: string; label: string; keywords?: string[]; badge?: string }[] }[] | Account, Workspace, Developers | Sections and pages. keywords make a page findable by words not in its label. |
| active | string | Controlled current page id. Pair with onChange. | |
| defaultActive | string | first page | Initially current page when uncontrolled. |
| onChange | (id: string) => void | Called when a page is opened. | |
| query | string | Controlled search text. Pair with onQueryChange. | |
| defaultQuery | string | "" | Initial search text when uncontrolled. |
| onQueryChange | (query: string) => void | Called on every keystroke. | |
| placeholder | string | "Find a setting" | Search placeholder and accessible label. |
| suggestions | string[] | ["invoice", "password", "webhook"] | Chips offered when nothing matches. |
| globalShortcut | boolean | false | Focus the search with / from anywhere on the page. |
| footer | ReactNode | Replaces the result count footer. Pass null to remove it. | |
| accent | string | "#2f7bff" | Accent for the focus ring, highlights and current page. |