Search BoxFreev1.0.0
A search field that says what it found: the count of results sits in the field (a short run of cells while they load), Escape clears and then leaves, and the count is announced once it settles. The ⌘K shortcut is opt-in, so it never fights your command palette.
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-search-box.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-search-box.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 @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Slow results
⌘K shortcut
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { SearchBox } from "@/components/ui/lumen/controls/search-box";
export function People({ people }: { people: { name: string }[] }) {
const [q, setQ] = React.useState("");
const found = people.filter((p) => p.name.toLowerCase().includes(q.toLowerCase()));
return <SearchBox value={q} onValueChange={setQ} resultCount={found.length} placeholder="Search people" />;
}Props
value / defaultValue / onValueChange–stringControlled or not.
resultCount–numberHow many results the query found: shown in the field, announced once it settles.
loadingfalsebooleanA run of cells replaces the count while results load.
onSubmit–(query: string) => voidEnter.
shortcutfalsebooleanFocus with ⌘K / Ctrl K and show the hint.
resultLabel"n results"(count) => stringThe spoken words, for other languages.
Show all 7 propsShow fewer
...input props–input attributesplaceholder, name, disabled, aria-label (default "Search") and so on.
Source
components/ui/lumen/controls/search-box.tsx
