@k2b/ui

Spotlight search

Portable search launchers and keyboard shortcut behavior.

Page actions

Sidebar

Mobile navigation

Toolbar

TSX

import {

openSpotlightSearch,

SpotlightButton,

type SpotlightSearchResolver,

} from "@k2b/ui";

const spotlightProjects = [

{ label: "Atlas", desc: "Customer portal", value: "atlas" },

{ label: "Beacon", desc: "Operations dashboard", value: "beacon" },

{ label: "Cedar", desc: "Documentation site", value: "cedar" },

];

const resolveSpotlightProjects: SpotlightSearchResolver<string> = ({ query }) => {

const normalizedQuery = query.trim().toLowerCase();

return spotlightProjects.filter((project) =>

`${project.label} ${project.desc}`.toLowerCase().includes(normalizedQuery),

);

};

const openSearch = async () => {

await openSpotlightSearch<string>({

title: "Open project",

placeholder: "Search projects...",

noResultsText: "No matching projects.",

resolve: resolveSpotlightProjects,

});

};

<SpotlightButton variant="default" onClick={openSearch} />

<SpotlightButton variant="chip" onClick={openSearch} />

<SpotlightButton variant="sidebar" onClick={openSearch} />

<SpotlightButton variant="sidebar-mobile" onClick={openSearch} />

<SpotlightButton variant="compact" onClick={openSearch} />

<SpotlightButton variant="icon" onClick={openSearch} />

SpotlightButton launches the portable search prompt with one shortcut and accessible-name contract across navigation contexts.

Use Spotlight search

Use it for a global or scoped entity search that should open from several navigation surfaces.

Import

import { openSpotlightSearch, SpotlightButton } from "@k2b/ui";

Example

const openSearch = () => openSpotlightSearch({
  title: "Open project",
  resolve: ({ query }) => projects.filter((project) => project.label.includes(query)),
});

<SpotlightButton variant="chip" onClick={openSearch} />

Variants cover default, compact, chip, sidebar, sidebar-mobile, and icon launchers.

Accessibility

Every variant retains an accessible label. isSpotlightShortcut recognizes Command+Shift+K and Control+Shift+K.

Runtime

The button renders during SSR; opening and resolving the prompt require hydration.