patterns

SearchPalette

Global ⌘K search palette + topbar trigger pill. Path-aware results (breadcrumb-style above each row), AI escape-hatch, keyboard hints in the footer. Mount once in AppShell `topbarCenter`.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/search-palette.json

Or import from the workspace package:

import { SearchPalette, SearchGroup, SearchResult } from "@8maverik8/design";

Examples

Trigger pill (click or ⌘K)

<SearchPalette
  provideResults={(q) => /* query your index */}
  onAskAi={(q) => router.push(`/ai?q=${q}`)}
/>

Anatomy

provideResultsFunction `(query) => SearchGroup[]`. The palette renders only groups whose `results.length > 0`.
onAskAiOptional. When provided, the AI escape-hatch row appears at the bottom.
triggerWidth / triggerLabelCustomise the trigger pill — default 240px / "Search…".

Guidelines

Index everything that's navigable — pages, audiences, campaigns, individual records.
Use this for filtering a single list.Use a regular `<Input>` inside the page. SearchPalette is a global jumper, not a per-page filter.
Provide ⌘K as the keyboard shortcut everywhere — users move between products and rely on muscle memory.

Install

Examples

Trigger pill (click or ⌘K)

Search…

Anatomy

Guidelines