Compact SearchProv1.0.0
Search that takes no room until it's needed: an icon in a top bar opens, in place, into a Search Box that grows from where the icon sits, with results underneath that arrow keys walk. Escape or a click away folds it back to the icon and keeps what you typed.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-compact-searchNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { CompactSearch } from "@/components/ui/lumen/controls/compact-search";
export function TopBarSearch({ pages }: { pages: { id: string; label: string }[] }) {
const [q, setQ] = React.useState("");
const hits = pages.filter((p) => p.label.toLowerCase().includes(q.toLowerCase()));
return <CompactSearch value={q} onValueChange={setQ} results={hits} onResultSelect={(hit) => console.log(hit.id)} />;
}Props
results / onResultSelect–{ id, label, description? }[]Listed under the field while there's a query; Enter or a click selects.
value / defaultValue / onValueChange–stringThe query, controlled or not (kept while folded).
expanded / defaultExpanded / onExpandedChange–booleanOpen or folded, controlled or not.
width280numberThe open width in px (it never exceeds the screen).
loading / placeholder / label"Search"Search Box propslabel names the icon button and the field.
Source
components/ui/lumen/controls/compact-search.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
