Search Cell

A command-style search field that widens on focus and unfolds grouped, ranked results with highlighted matches, a sliding selection and full keyboard navigation.

Esc

Open

placeholder

maxResults7

expand

emptyMessage

Installation

npx shadcn@latest add @glint-ui/search-cell

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/search-cell.json

Usage

import { SearchCell } from "@/components/ui/search-cell";

<SearchCell
  items={[
    { id: "dash", label: "Dashboard", group: "Pages", icon: <LayoutGrid /> },
    { id: "new", label: "New project", group: "Actions", shortcut: ["⌘", "N"] },
  ]}
  onSelect={(item) => router.push("/" + item.id)}
/>

Props

Prop	Type	Default	Description
placeholder	string	"Search or jump to…"	Input placeholder, also its accessible name.
maxResults	number	7	Max rows shown.
expand	boolean	true	Grow wider while open.
emptyMessage	string	"No results for"	Prefix of the empty state, followed by the query.
items	ReactNode	—	`{ id, label, description?, group?, icon?, keywords?, shortcut? }[]`.
onSelect	ReactNode	—	`(item) => void`, on click or Enter.
defaultOpen	ReactNode	—	Start open without taking focus. Default false.
className	string	—	Extra classes for the root element.