# `PhoenixKitCatalogue.Web.Components.CatalogueBrowse`
[🔗](https://github.com/BeamLabEU/phoenix_kit_catalogue/blob/v0.19.1/lib/phoenix_kit_catalogue/web/components/catalogue_browse.ex#L1)

Embeddable catalogue browse surface: search, category chips, and the
photo-forward item grid as one drop-in LiveComponent — the same
`BrowseState` + `Browse.*` stack `ItemSelectorModal` runs on, minus the
selection chrome. Put a catalogue (or a scoped slice of one) on any
logged-in page:

    <.live_component
      module={PhoenixKitCatalogue.Web.Components.CatalogueBrowse}
      id="showroom"
      scope={%{catalogue_uuids: [@catalogue.uuid], statuses: ["active"]}}
    />

## Messages to the host

One generic message, so a host writes a single clause and switches on
the event:

    handle_info({:catalogue_browse, %{id: id, event: :item_clicked, item: item}}, socket)

`item` is a presented map (`Browse.present_items/2`): uuid, translated
name, sku, price, unit, photo_url. Cards are clickable only when the
host opts in with `on_item_click: true` — a purely decorative embedding
never receives (or needs to handle) anything.

## Scope

Identical semantics to `ItemSelectorModal`: fixed at mount, every fetch
re-derived from it, category narrowing only within it. See
`PhoenixKitCatalogue.Catalogue.BrowseState`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*