Search

Advanced search components with trending searches, recent history, and minimal designs

Note

All presented components are responsive and compatible with Tailwind CSS. Make sure Tailwind is configured in your project to use them.

Prop	Type	Description	Default
`onSearch`	`(query: string) => Promise<SearchOption[]>`	Async search function that returns results	`mockSearch`
`trendingSearches`	`SearchOption[]`	Array of trending search suggestions	`[]`
`onSelect`	`(item: SearchOption) => void`	Callback fired when an item is selected	`undefined`
`placeholder`	`string`	Placeholder text for the search input	`"Search documentation, examples, and more..."`
`className`	`string`	Additional CSS classes for styling	`undefined`
`maxRecentSearches`	`number`	Maximum number of recent searches to store	`5`
`showRecentSearches`	`boolean`	Show/hide recent searches section	`true`
`showTrendingSearches`	`boolean`	Show/hide trending searches section	`true`

SearchOption Interface:

interface SearchOption {
  id: string;
  title: string;
  description?: string;
  category?: string;
}

Prop	Type	Description	Default
`onSearch`	`(query: string) => Promise<SearchOption[]>`	Async search function that returns results	`mockSearch`
`trendingSearches`	`SearchOption[]`	Array of trending search suggestions	`[]`
`onSelect`	`(item: SearchOption) => void`	Callback fired when an item is selected	`undefined`
`placeholder`	`string`	Placeholder text for the search input	`"Search without recent searches..."`
`className`	`string`	Additional CSS classes for styling	`undefined`
`maxRecentSearches`	`number`	Maximum number of recent searches to store	`5`
`showRecentSearches`	`boolean`	Show/hide recent searches section	`false`
`showTrendingSearches`	`boolean`	Show/hide trending searches section	`true`

SearchOption Interface:

interface SearchOption {
  id: string;
  title: string;
  description?: string;
  category?: string;
}

Prop	Type	Description	Default
`onSearch`	`(query: string) => Promise<SearchOption[]>`	Async search function that returns results	`mockSearch`
`trendingSearches`	`SearchOption[]`	Array of trending search suggestions	`[]`
`onSelect`	`(item: SearchOption) => void`	Callback fired when an item is selected	`undefined`
`placeholder`	`string`	Placeholder text for the search input	`"Basic search..."`
`className`	`string`	Additional CSS classes for styling	`undefined`
`maxRecentSearches`	`number`	Maximum number of recent searches to store	`5`
`showRecentSearches`	`boolean`	Show/hide recent searches section	`false`
`showTrendingSearches`	`boolean`	Show/hide trending searches section	`false`

SearchOption Interface:

interface SearchOption {
  id: string;
  title: string;
  description?: string;
  category?: string;
}

Usage:

With Trending and Recent Searches