Search

import { SearchDialog } from '@kit/notion/ui/search-dialog';
import { notionConfig } from '../../../config/cms.config';

export function NotionSearchDialogDemo() {
    return (
        <div className="w-full max-w-md">
            <SearchDialog config={notionConfig} contentType="posts" placeholder="Search blog posts..." />
        </div>
    );
}

The Notion Search feature provides a comprehensive search interface that allows users to find content across your Notion-powered blog posts, documentation, or other content types. It combines a sleek UI with powerful backend search capabilities.

Installation

pnpmnpmyarnbun
pnpm add '@kit/notion@workspace:*'
Copy

'use client';

import { cn, debounce } from '@kit/shared';
import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import {
    Command,
    CommandDialog,
    CommandEmpty,
    CommandGroup,

How It Works

Backend API

The search functionality is powered by a REST API endpoint that queries your Notion content:

Copy to Clipboardimport { createNotionSearchHandler } from '@kit/notion/api';
import { notionConfig } from '~/config/cms.config';
 
export const POST = createNotionSearchHandler(notionConfig);

Frontend Component

The SearchDialog component provides the user interface, handling search queries, displaying results, and navigation.

Copy to Clipboardimport { SearchDialog } from '@kit/notion/ui/search-dialog';
import { notionConfig } from '~/config/cms.config';
 
export function BlogPage() {
    return (
        <div className="container mx-auto py-8">
            <SearchDialog
                config={notionConfig}
                contentType="posts"
                placeholder="Search blog posts..."
            />
        </div>
    );
}

Features

Intelligent Search

• Real-time search with 300ms debouncing for optimal performance
• Multi-field matching across titles, descriptions, and content
• Relevance scoring with visual indicators (High/Medium/Low)
• Match highlighting shows exactly where matches occur

User Experience

• Keyboard shortcuts - Press ⌘B (Mac) or Ctrl+B (Windows/Linux) to open search
• Responsive design works on all screen sizes
• Loading states provide feedback during search
• Empty states guide users when no results are found

Result Presentation

• Rich previews with titles, descriptions, and match locations
• Score badges indicate result relevance
• Field indicators show which fields contained matches
• Performance metrics display search processing time

API Reference

SearchDialogProps