--- title: "UI Components | Ceisium Docs" description: "Install search UI patterns and wire them to a Ceisium Search project." canonical: https://ceisium.com/docs/ui-components/ --- > For the complete documentation and public content index, see [llms.txt](/llms.txt). This page is the Markdown alternative to the canonical HTML page. ## Start 1. [Quickstart Create a project, crawl it, query the API, and embed search.](https://ceisium.com/docs/) 2. [Search API Auth, request fields, response shape, pagination, errors, and examples.](https://ceisium.com/docs/search-api/) 3. [UI Components Install search UI patterns and wire them to a Ceisium Search project.](https://ceisium.com/docs/ui-components/) 4. [Analytics Read search events, no-result queries, popular queries, and engagement.](https://ceisium.com/docs/analytics/) ## Search quality 1. [Benchmark Results, response times, and methods for our search comparison.](https://ceisium.com/docs/benchmark/) ## Observability 1. [Crawl Logs Track crawl status, page outcomes, failures, retries, and coverage.](https://ceisium.com/docs/crawl-logs/) 2. [Usage Review API requests, crawl volume, indexing usage, and plan limits.](https://ceisium.com/docs/usage/) 1. [Home](https://ceisium.com/) 2. / 3. [Docs](https://ceisium.com/docs/) 4. / 5. UI Components Updated Sep 27, 2026 # UI Components Install search UI patterns and wire them to a Ceisium Search project. Browse docs ## Start 1. [Quickstart](https://ceisium.com/docs/) 2. [Search API](https://ceisium.com/docs/search-api/) 3. [UI Components](https://ceisium.com/docs/ui-components/) 4. [Analytics](https://ceisium.com/docs/analytics/) ## Search quality 1. [Benchmark](https://ceisium.com/docs/benchmark/) ## Observability 1. [Crawl Logs](https://ceisium.com/docs/crawl-logs/) 2. [Usage](https://ceisium.com/docs/usage/) UI components give visitors a search surface backed by either a restricted Browser/public key or your own server route. ## Component patterns Pattern Use it when Command palette Users expect keyboard search with `/` or a shortcut. Inline search A docs page needs a visible input and result list. Search bar A compact bar should open a modal when clicked. Search modal You want an overlay with a search input and results. ## Direct browser setup Create a Browser/public key, configure its allowed origins and result URL prefixes, and expose it as `CEISIUM_PUBLIC_SEARCH_KEY` in your client configuration. TS ``` const response = await fetch("https://api.ceisium.com/v1/search", { method: "POST", headers: { Authorization: `Bearer ${CEISIUM_PUBLIC_SEARCH_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ project_id: CEISIUM_PROJECT_ID, query, top_k: 8, path_prefix: "https://nextjs.org/docs/app", }),}); ``` ## Server route alternative If you use a Server key, keep it on your backend and have the component call your route. TS ``` export async function POST(request: Request) { const { query, top_k = 8 } = await request.json(); const response = await fetch("https://api.ceisium.com/v1/search", { method: "POST", headers: { Authorization: `Bearer ${process.env.CEISIUM_SEARCH_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ project_id: process.env.CEISIUM_PROJECT_ID, query, top_k, }), }); return Response.json(await response.json());} ``` ## Client config Keep the config small: TS ``` { placeholder: "Search docs...", shortcut: "/", limit: 8, debounceMs: 200, emptyMessage: "No results found."} ``` For the Next.js App Router docs, useful preview queries are: TXT ``` How do I add typed JSON-LD to a page component?Next.js useParmas hookinstall Next.js App Routernext.config.js reference ``` ## Result behavior Each result should show: - Page title. - Short snippet. - Canonical URL or path. - Click handler that navigates to the result. Keep result lists scrollable so long docs sites do not make the modal grow past the viewport. ## Latest request wins During fast typing, an older request can finish after a newer request. Debouncing reduces request volume, but it does not guarantee response order. Cancel superseded work and only let the newest request update the UI. TS ``` let activeController: AbortController | null = null;let requestVersion = 0;async function search(query: string) { const version = ++requestVersion; activeController?.abort(); const controller = new AbortController(); activeController = controller; try { const response = await fetch("https://api.ceisium.com/v1/search", { method: "POST", signal: controller.signal, headers: { Authorization: `Bearer ${CEISIUM_PUBLIC_SEARCH_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ project_id: CEISIUM_PROJECT_ID, query, top_k: 8, }), }); const data = await response.json(); if (version !== requestVersion) return; renderResults(data.results); } catch (error) { if (error instanceof DOMException && error.name === "AbortError") return; if (version === requestVersion) renderError(); }} ``` Ceisium Search’s built-in component previews already apply this guard. Add it when you call the raw Search API from a custom typeahead client. ## Styling Use your app theme tokens for borders, background, text, and focus states. Avoid hardcoded colors in the component. [Previous Search API](https://ceisium.com/docs/search-api/) [Next Analytics](https://ceisium.com/docs/analytics/) Copy page Copy page Copy page as Markdown for LLMs [ ![](https://www.google.com/s2/favicons?domain=chatgpt.com&sz=32)Open in ChatGPT ↗ Ask questions about this page ](https://chatgpt.com/?q=Use%20this%20documentation%20page%20as%20context%20and%20help%20me%20answer%20questions%20about%20it%3A%20UI%20Components%20https%3A%2F%2Fceisium.com%2Fdocs%2Fui-components%2F)[ ![](https://www.google.com/s2/favicons?domain=claude.ai&sz=32)Open in Claude ↗ Ask questions about this page](https://claude.ai/new?q=Use%20this%20documentation%20page%20as%20context%20and%20help%20me%20answer%20questions%20about%20it%3A%20UI%20Components%20https%3A%2F%2Fceisium.com%2Fdocs%2Fui-components%2F)