Navigation

SearchBar

Search input with live suggestions, recent searches, and keyboard navigation.

A search bar with live suggestions, recent search history, and keyboard navigation. Supports expandable mode with animated transitions.

Preview

Usage

<CSearchBar
  :suggestions="searchResults"
  @search="handleSearch"
  @update:query="fetchSuggestions"
/>

<CSearchBar expandable />

<CSearchBar :recent-searches="['shoes', 'bags', 'watches']" />

Prop	Type	Default	Description
`suggestions`	`SearchSuggestion[]`	`[]`	Live suggestion results
`recentSearches`	`string[]`	`[]`	Stored recent queries
`placeholder`	`string`	`'Search products...'`	Input placeholder
`expandable`	`boolean`	`false`	Collapse to icon on small screens
`loading`	`boolean`	`false`	Show loading indicator
`debounce`	`number`	`300`	Debounce time (ms)
`ui`	`Partial<{...}>`	—	Per-instance theme overrides

Event	Payload	Description
`search`	`string`	User submitted a search
`update:query`	`string`	Input value changed (debounced)
`select`	`SearchSuggestion`	Suggestion selected

Slot	Scoped Props	Description
`suggestion`	`{ item }`	Custom suggestion item rendering
`no-results`	`{ query }`	Custom no-results state
`recent`	`{ searches, select }`	Custom recent searches display

PromoBanner

Promotional banner with countdown timer, discount display, and CTA.

EmptyState

Reusable empty state placeholder with icon, title, description, and action button.