SearchPanel

React SDK guidance for SearchPanel.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

Import path: @enadhq/enad-react-sdk/client/storefront.
Live playground: /components/commerce/search-panel.

Use SearchPanel when the page or overlay needs a search destination shell, rather than a single autocomplete field. It works well in search overlays, quick-result drawers, and search-first navigation flows where the shell needs heading copy, normalized result sections, and a footer action.

If the experience only needs a compact suggestion field, use SearchAutocomplete instead.

Composition notes

SearchPanel stays provider-agnostic on purpose:

keep provider requests, shaping, and ranking outside the component
map backend records into SearchPanelSectionData and SearchPanelItem
let the panel focus on layout, accessibility, and result presentation

That separation keeps Unbxd-specific or provider-specific assumptions out of the public SDK surface.

Behavior and theming guidance

Treat SearchPanel as the body of the search surface, not the overlay controller. Let a parent shell own open-close state, focus traps, analytics, and route handoff.

Use the easy-path props when the default anatomy already fits. Drop to the compound slots when the shell needs custom heading rhythm, extra helper text, or a more branded footer.

Contract scope

Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
Public import: @enadhq/enad-react-sdk/client/storefront.
Playground route: /sandbox?component=SearchPanel.
Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes