Back to components
Search Results Panel React component

What is this?

A white in-app search panel. The borderless field shows ⌘K until you type, then a clear button. All, Docs, People, and Issues are text tabs with counts and a sliding underline. All lists up to three of each, with Show all on the section label. A doc row has its path, a person their role and city, and an issue its id at the right. Matches are bold, arrow keys move the row, and Enter opens it. Switching tabs crossfades the list and the panel height follows. Swap the data and labels, then drop it into a docs site or an admin search.

Component

Search Results Panel

A white in-app search panel. The borderless field shows ⌘K until you type, then a clear button. All, Docs, People, and Issues are text tabs with counts and a sliding underline. All lists up to three of each, with Show all on the section label. A doc row has its path, a person their role and city, and an issue its id at the right. Matches are bold, arrow keys move the row, and Enter opens it. Switching tabs crossfades the list and the panel height follows. Swap the data and labels, then drop it into a docs site or an admin search.

Checking access…
Live Preview

Verified Technical Spec

Animation
Framer Motion
Reduced motion
Verified
Keyboard focus
Verified
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS · Motion · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0
  • Motion 12.42.2

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Motion
  • Lucide

Version 1.0.0