Search Projects
Freev1.0.0A search box that lists recent projects on focus and filters with env: and owner:.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { useRouter } from "next/navigation";
import { SearchProjects, type SearchProject } from "@/components/ui/notchset/search-projects";
const projects: SearchProject[] = [
{ id: "planner", name: "Planner", env: "PROD", owner: "MAYA", detail: "12 AGENTS", spark: [8, 9, 7, 10, 12, 11, 13, 14] },
{ id: "triage", name: "Triage", env: "STAGING", owner: "JONAS", detail: "4 AGENTS" },
];
export function ProjectSwitcher() {
const router = useRouter();
return <SearchProjects projects={projects} me="MAYA" onSelect={(p) => router.push(`/p/${p.id}`)} />;
}Props
projects–{ id, name, env, owner, detail?, spark? }[]The list.
recent–string[]Ids shown before typing.
filters–[prefix, value][]The chips (env:prod, owner:me…).
me–stringWho owner:me means.
onSelect / onCreate–fnOpen a project; create one from the query.
hotkey–stringFocuses it from anywhere (/).
Anatomy
- No primitive needed: one file serves both builds.
- Filters are just text: env: and owner: prefixes work typed or from a chip.
- Bring your own data: projects, recents and filters are props.
SearchProjectsdata-slot="search-projects"The field and list.
Source
components/ui/notchset/search-projects.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/search-projects.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/search-projects.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. No extra packages: React and Tailwind CSS v4 are enough.
- 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/search-projects.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Jumping to a project, workspace or repo by name
Use something else when
- Searching content across a product: use Expanded Search
Mistakes to avoid
- Keep spark data on one scale across projects: it's drawn that way
Agents find it by
- search projects, project switcher, combobox, quick open, filter search, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/search-projects.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- /
- Focus
- ↑ / ↓
- Move
- Enter
- Open
- Esc
- Close
Accessibility
- role=combobox with a listbox of options and aria-activedescendant
- The match is underlined and bold, not only coloured
Motion
- Open
- The leader drops (100ms) and the list unrolls (380ms after 80ms); rows drop in 35ms apart
- Highlight
- One block glides between rows (160ms)
Responsive
- 400px, shrinking with its container; rows truncate names and keep their spark.
- 44px field on touch screens.
Performance
- Filtering is synchronous over the list you pass; the list mounts with the field and unrolls with CSS.
Changelog
v1.0.0 · 2026-10-02
First release
