Search

A search field whose panel offers products, categories and suggestions while the shopper types, with a "Search for" row that submits; inline under the field or in an overlay.

States: Default, Hover, Focus, Disabled

Parts

Part	File	Does
Search	Search.vue	Groups all parts of the search: a field whose panel offers results, suggestions and a "Search for" row.
SearchEmpty	SearchEmpty.vue	A line of text in the panel, such as "No results for …"; the shop decides when it shows.
SearchGroup	SearchGroup.vue	A headed section of the panel: products, categories, brands, or suggestions.
SearchHighlight	SearchHighlight.vue	Text with every match of the search terms in bold; the terms default to the typed query.
SearchInput	SearchInput.vue	The search field: a search icon, the input, and a button that clears it.
SearchItem	SearchItem.vue	One row of the panel that opens something: a link, so middle-click and open-in-new-tab work.
SearchLoading	SearchLoading.vue	Skeleton rows and "Searching…" while the shop's search answers; shows only while Search is loading.
SearchOverlay	SearchOverlay.vue	Shows the search in an overlay: near the top on wide screens, full screen on phones with a Cancel button.
SearchQuery	SearchQuery.vue	The first row while the shopper types: "Search for …", which submits the query to the results page.
SearchResults	SearchResults.vue	The panel of results, suggestions and the "Search for" row, under the field or inside the overlay.
SearchTag	SearchTag.vue	A suggested search, drawn as a tag; opening it runs that search.

Anatomy

<Search>
  <SearchInput />
  <SearchResults>
    <SearchGroup>
      <SearchTag />
      <SearchItem>
        <SearchHighlight />
      </SearchItem>
    </SearchGroup>
    <SearchQuery />
    <SearchLoading />
    <SearchEmpty />
    <SearchTag />
  </SearchResults>
</Search>

Styling

Part	Recipe
SearchEmpty	search-empty
SearchGroup	search-group
SearchGroup	search-group-heading
SearchHighlight	search-highlight
SearchInput	search-input
SearchInput	search-input-clear
SearchInput	search-cancel
SearchItem	search-item
SearchLoading	search-loading
SearchLoading	search-loading-row
SearchLoading	search-loading-label
SearchOverlay	search-overlay
SearchOverlay	search-overlay-backdrop
SearchQuery	search-query
SearchQuery	search-query-term
SearchResults	search-results
SearchResults	search-results-viewport
SearchTag	search-tag

Install

Writes 13 files into components/ui/search/. For agents, npx @frontic/ui docs search prints this reference as markdown; the MCP server serves the same.

Installs with it: skeleton
npm packages: @lucide/vue; class-variance-authority; reka-ui

Built from

Skeleton

API reference

Search Search.vue

Groups all parts of the search: a field whose panel offers results, suggestions and a "Search for" row.

Prop	Type	Default
loading	boolean	false

openOnFocus	boolean	true

loop	boolean	true

query	string	''

open	boolean	false

Event	Payload
update:open	value: boolean

select	value: unknown

submit	query: string

update:query	value: string

Slot	Slot props
default	{ query: string; open: boolean; }

Parts

Anatomy

Styling

Install

Built from

API reference

Search Search.vue

SearchEmpty SearchEmpty.vue

SearchGroup SearchGroup.vue

SearchHighlight SearchHighlight.vue

SearchInput SearchInput.vue

SearchItem SearchItem.vue

SearchLoading SearchLoading.vue

SearchOverlay SearchOverlay.vue

SearchQuery SearchQuery.vue

SearchResults SearchResults.vue

SearchTag SearchTag.vue