---
title: Components (headless import path)
description: Mounting bolder-storefront's bundled component factories and on-demand components from headless code.
---

## Bundled UI components

`bolder-storefront` also re-exports a couple of prebuilt component factories, meant
to be mounted with `storefront.mount()` like any other component. Their full options
are documented in the [Components reference](/frontend/components) (they're the
same `base` components used by hosted themes via `Bolder.components.render(...)`);
this page only covers the headless import path.

```js
import {
  createStorefront,
  CartTable, CartTotals, CartPromos,
  FeedbackButton, ShoppingBeacon,
  Slideout, Supernav,
  DeliverySetup, ShippingCalculator,
  AuthDelivery,
} from 'bolder-storefront'

createStorefront({ shop: 'acme' }).then(function(storefront) {
  storefront.mount(CartTable, '#cart-table', { show_cart_gauge: true, cart_gauge_limit: 50000 })
  storefront.mount(FeedbackButton, '#feedback-button')
})
```

| Component | Description |
|-----------|-------------|
| `CartTable` | Cart line items with quantity controls, bundle/volume-discount hints, and an optional cart gauge. Purely a renderer — `ShoppingBeacon` mounts one internally, so only use this directly when building a custom cart UI outside the beacon. |
| `CartTotals` | Subtotal/total row, coupon input, and checkout button. Meant to accompany `CartTable`. |
| `CartPromos` | Promotion/discount display for the cart. |
| `Slideout` | Generic slide-out panel wrapper. Used by `ShoppingBeacon` to host the cart UI; can be reused for custom slide-out drawers. |
| `ShoppingBeacon` | Full cart-beacon integration: floating cart icon, slide-out cart panel (`CartTable` + `CartTotals` inside a `Slideout`), and embedded-checkout wiring. See [Shopping beacon integration](/frontend/sdk/checkout#shopping-beacon-integration). |
| `FeedbackButton` | Floating feedback/help button. Submits through `storefront.forms` when available. |
| `Supernav` | Navigation bar with cart count badge, login state, and search trigger. |
| `DeliverySetup` | Inline delivery-address/pickup-point selector. For a managed modal overlay, use `openDeliverySetup()` instead. |
| `ShippingCalculator` | Standalone shipping cost estimator widget. |
| `AuthDelivery` | Combined login/signup + delivery-setup component. Opened imperatively via `openLogin()` for auth-only flows, or mounted inline when you need both. |

For `CustomerConsole` and `OrderTracking`, see [Customer Console](/frontend/sdk/console) — they ship in the separate console bundle.

## On-demand components

Some components aren't bundled into `bolder-storefront` at all — they're fetched lazily,
the same on-demand mechanism hosted themes use via `Bolder.components.render(...)`.
`storefront.components` is that same registry, auto-wired by `createStorefront()` (no setup
needed), pointed at the shop's own asset CDN (`assetsHost`, sourced from `/shop.json`'s
`shop.assets_host`) rather than the current page's origin — necessary since the page embedding
the SDK is rarely served from the shop itself.

```js
createStorefront({ shop: 'acme' }).then(function(storefront) {
  storefront.components.render('product-card', '#product-card', {
    productId:    123,
    title:        'Aurora Runner',
    salePrice:    '$89.990',
    regularPrice: '$99.990',
    images:       [{ src: '...', alt: 'Aurora Runner' }],
  }, function(result) {
    // Not error-first: fires as cb(err) on a script-load failure, or as
    // cb(node, state) — the rendered node, not null — on success.
    if (result instanceof Error) console.error(result)
  })
})
```

| Component | Description |
|-----------|-------------|
| `product-card` | Self-contained product card: image carousel, add-to-cart with a live -/+ quantity control once the item's in the cart. Single-axis variants (one option, e.g. just size) render as inline buttons/swatches; products with more than one variant option (color *and* size) open `product-variant-selector` in a slideout instead of growing their own matrix-matching logic. |

Most other on-demand components (`assets/js/components/ondemand/*` in the `storefronts` repo)
are hosted-theme-oriented — bundle configurators, order-tracking widgets, faceted search, etc.
— and haven't been exercised headlessly. See the [Components reference](/frontend/components)
for the full list; nothing stops calling `storefront.components.render(...)` with any of them,
but their `data`/callback shape is only proven against the hosted `Bolder.components.render(...)`
call sites.