Premium Suggestions

The Seekora UI SDK includes 7 premium dropdown variants inspired by leading search experiences, including Amazon, Google, Pinterest, and more.

SuggestionSearchBar

The all-in-one component that combines input, dropdown, and data fetching.

Props

Prop	Type	Description
client	SeekoraClient	Seekora client instance
variant	DropdownVariant	Dropdown style variant
fieldMapping	SuggestionFieldMapping	Map suggestion fields
productFieldMapping	ProductFieldMapping	Map product fields
sections	SectionConfig[]	Configure dropdown sections
onSearch	(query) => void	Search callback
onSuggestionSelect	(suggestion) => void	Suggestion select callback
placeholder	string	Input placeholder
className	string	CSS class

Variants

Variant	Description
amazon	Amazon-style with department scoping
google	Clean Google-style search
pinterest	Visual discovery style
spotlight	macOS Spotlight / Command palette
shopify	Modern e-commerce style
mobile-sheet	Mobile-first bottom sheet
minimal	Ultra-clean editorial style

Basic Example

import { SuggestionSearchBar } from '@seekora-ai/ui-sdk-react';

<SuggestionSearchBar
  client={client}
  variant="amazon"
  placeholder="Search products..."
  onSearch={(query) => {
    navigate(`/search?q=${query}`);
  }}
/>

With Field Mapping

<SuggestionSearchBar
  client={client}
  variant="shopify"
  fieldMapping={{
    query: 'query',
    count: 'popularity',
    category: 'category',
  }}
  productFieldMapping={{
    id: 'id',
    title: 'title',
    image: 'imageUrl',
    price: 'price',
    url: 'productUrl',
  }}
/>

With Section Configuration

<SuggestionSearchBar
  client={client}
  variant="spotlight"
  sections={[
    { id: 'suggestions', enabled: true, maxItems: 5, title: 'Suggestions' },
    { id: 'products', enabled: true, maxItems: 4, title: 'Products' },
    { id: 'categories', enabled: true, maxItems: 3, title: 'Categories' },
    { id: 'trending', enabled: true, maxItems: 5, title: 'Trending' },
  ]}
/>

Dropdown Variants

AmazonDropdown

Amazon-style dropdown with department filtering and product previews.

import { AmazonDropdown } from '@seekora-ai/ui-sdk-react';

<AmazonDropdown
  query={query}
  suggestions={suggestions}
  products={products}
  departments={departments}
  selectedDepartment={selectedDept}
  onDepartmentChange={setSelectedDept}
  onSuggestionClick={handleSuggestionClick}
  onProductClick={handleProductClick}
/>

Features:

• Department selector dropdown
• Product preview cards
• Recent searches
• Trending searches

GoogleDropdown

Clean, minimal Google-style search suggestions.

import { GoogleDropdown } from '@seekora-ai/ui-sdk-react';

<GoogleDropdown
  query={query}
  suggestions={suggestions}
  recentSearches={recentSearches}
  trendingSearches={trendingSearches}
  onSuggestionClick={handleClick}
  onClearRecent={clearRecentSearches}
/>

Features:

• Clean typography
• Recent searches with clear option
• Trending searches
• Keyboard navigation

PinterestDropdown

Visual, discovery-focused dropdown with image previews.

import { PinterestDropdown } from '@seekora-ai/ui-sdk-react';

<PinterestDropdown
  query={query}
  suggestions={suggestions}
  ideas={ideas}
  boards={boards}
  onSuggestionClick={handleClick}
  onIdeaClick={handleIdeaClick}
/>

Features:

• Image-rich suggestions
• Idea/inspiration cards
• Board suggestions
• Visual grid layout

SpotlightDropdown

macOS Spotlight-inspired command palette style.

import { SpotlightDropdown } from '@seekora-ai/ui-sdk-react';

<SpotlightDropdown
  query={query}
  results={results}
  categories={categories}
  onResultClick={handleClick}
  showCategories={true}
  showPreview={true}
/>

Features:

• Category icons
• Result preview panel
• Keyboard shortcuts display
• Command palette feel

ShopifyDropdown

Modern e-commerce dropdown with product cards.

import { ShopifyDropdown } from '@seekora-ai/ui-sdk-react';

<ShopifyDropdown
  query={query}
  suggestions={suggestions}
  products={products}
  collections={collections}
  onSuggestionClick={handleClick}
  onProductClick={handleProductClick}
  onCollectionClick={handleCollectionClick}
/>

Features:

• Product cards with images
• Collection links
• Price display
• Add to cart quick action

MobileSheetDropdown

Mobile-first bottom sheet design.

import { MobileSheetDropdown } from '@seekora-ai/ui-sdk-react';

<MobileSheetDropdown
  query={query}
  suggestions={suggestions}
  products={products}
  isOpen={isOpen}
  onClose={handleClose}
  onSuggestionClick={handleClick}
/>

Features:

• Bottom sheet on mobile
• Swipe to close
• Touch-optimized
• Full-screen on small devices

MinimalDropdown

Ultra-clean, editorial-style dropdown.

import { MinimalDropdown } from '@seekora-ai/ui-sdk-react';

<MinimalDropdown
  query={query}
  suggestions={suggestions}
  onSuggestionClick={handleClick}
/>

Features:

• Clean typography
• No decorative elements
• Focus on content
• Elegant animations

Field Mapping

Suggestion Field Mapping

interface SuggestionFieldMapping {
  query: string;       // e.g., 'query' or 'text'
  count?: string;      // e.g., 'popularity' or 'searchCount'
  category?: string;   // e.g., 'category' or 'type'
  image?: string;      // e.g., 'thumbnailUrl'
  highlighted?: string; // e.g., 'highlightedQuery'
}

Product Field Mapping

interface ProductFieldMapping {
  id: string;          // e.g., 'id' or 'productId'
  title: string;       // e.g., 'title' or 'name'
  image?: string;      // e.g., 'imageUrl' or 'thumbnail'
  price?: string;      // e.g., 'price' or 'displayPrice'
  originalPrice?: string; // e.g., 'originalPrice' or 'compareAtPrice'
  url?: string;        // e.g., 'productUrl' or 'slug'
  brand?: string;      // e.g., 'brand' or 'vendor'
  rating?: string;     // e.g., 'rating' or 'averageRating'
  inStock?: string;    // e.g., 'inStock' or 'available'
}

Example with Complex Mapping

<SuggestionSearchBar
  client={client}
  variant="amazon"
  fieldMapping={{
    query: 'suggestion.text',
    count: 'suggestion.popularity',
    category: 'suggestion.metadata.category',
  }}
  productFieldMapping={{
    id: 'document.id',
    title: 'document.product.name',
    image: 'document.images[0].url',
    price: 'document.pricing.current',
    originalPrice: 'document.pricing.original',
    url: 'document.seo.slug',
    brand: 'document.brand.name',
    rating: 'document.reviews.average',
  }}
/>

Section Configuration

Configure which sections appear and their behavior:

interface SectionConfig {
  id: string;          // Section identifier
  enabled: boolean;    // Show/hide section
  maxItems?: number;   // Max items to display
  title?: string;      // Section title
  icon?: ReactNode;    // Section icon
}

Available Sections

Section ID	Description
suggestions	Query suggestions
products	Product results
categories	Category matches
collections	Collection matches
trending	Trending searches
recent	Recent searches
popular	Popular searches
brands	Brand suggestions

Example

<SuggestionSearchBar
  client={client}
  variant="spotlight"
  sections={[
    { id: 'recent', enabled: true, maxItems: 3, title: 'Recent' },
    { id: 'suggestions', enabled: true, maxItems: 5, title: 'Suggestions' },
    { id: 'products', enabled: true, maxItems: 4, title: 'Products' },
    { id: 'categories', enabled: true, maxItems: 3, title: 'Categories' },
    { id: 'trending', enabled: false }, // Disabled
  ]}
/>

Responsive Design

All dropdown variants include responsive utilities:

<SuggestionSearchBar
  client={client}
  variant="shopify"
  responsive={{
    mobile: {
      variant: 'mobile-sheet',
      maxItems: 5,
    },
    tablet: {
      variant: 'shopify',
      maxItems: 8,
    },
    desktop: {
      variant: 'shopify',
      maxItems: 10,
    },
  }}
/>

Custom Rendering

Custom Suggestion Render

<SuggestionSearchBar
  client={client}
  variant="minimal"
  renderSuggestion={(suggestion, index, isSelected) => (
    <div className={`suggestion ${isSelected ? 'selected' : ''}`}>
      <SearchIcon />
      <span dangerouslySetInnerHTML={{ __html: suggestion.highlighted }} />
      <span className="count">{suggestion.count}</span>
    </div>
  )}
/>

Custom Product Render

<SuggestionSearchBar
  client={client}
  variant="amazon"
  renderProduct={(product, index) => (
    <div className="product-suggestion">
      <img src={product.image} alt={product.title} />
      <div>
        <h4>{product.title}</h4>
        <span className="price">${product.price}</span>
        {product.rating && <StarRating value={product.rating} />}
      </div>
    </div>
  )}
/>

Keyboard Navigation

All dropdowns support full keyboard navigation:

Key	Action
↓	Move to next item
↑	Move to previous item
Enter	Select current item
Escape	Close dropdown
Tab	Move to next section

Analytics

Track suggestion interactions:

<SuggestionSearchBar
  client={client}
  variant="google"
  onSuggestionView={(suggestions) => {
    analytics.track('suggestions_viewed', { count: suggestions.length });
  }}
  onSuggestionClick={(suggestion, position) => {
    analytics.track('suggestion_clicked', { suggestion, position });
  }}
/>

Next Steps

• Theming - Customize dropdown appearance
• Vue Components - Vue component reference