# Using Vender components

Open `components.html` over HTTP, search or filter the catalog, then expand View source & copy. Copy and download controls provide literal markup fragments with dependency notes. Fragments are not standalone commerce applications.

Start from a working HTML page and preserve the shared dialogs and unique IDs. Load `assets/css/base.css`, `assets/css/home.css` and the page stylesheet, then `assets/css/identity.css` and `assets/css/responsive.css`. Load `assets/js/catalog-data.js` before `assets/js/store.js` and preserve deferred script order.

Product quick-add requires the quick-view and bag dialogs. Wishlist uses `assets/js/wishlist.js` and its stylesheet; comparison uses `assets/js/compare.js` and its stylesheet. `assets/js/components.js` initializes the entire catalog page: extract the matching handler and required markup when using a single interactive example. Product images use `assets/img/` paths relative to the HTML page.

Native details/summary, labels and radios retain their browser behavior. Custom totals and state changes require the relevant JavaScript. Preserve keyboard use, visible focus, live status messages and unavailable/empty states. See `INTEGRATIONS.md` before connecting a live store.