# Components — `@cartbase/storefront` UI families The component layer of `@cartbase/storefront`: what each family ships, the SDK calls it requires, the admin settings that change its behavior, and its mount rules. Every family is production-proven — ported from live commerce storefronts and rewired to Cartbase data seams. This page has no executable curls — the endpoints these components consume are executably documented in their own domain files ([integrations.md](integrations.md), [consent.md](consent.md), etc.); this page is the component-side contract that binds to them. Import discipline: always import from the subpath (`@cartbase/storefront/tracking/meta-pixel`, `@cartbase/storefront/lib/money`) — tree-shaking and Next.js RSC boundary detection both work better than via barrels. Styling resolves against STOREFRONT theme tokens (`bg-card`, `text-foreground`, …, shadcn-standard names) — mount the Tailwind preset (`@cartbase/storefront/tailwind-preset`) and define the token variables in the app's CSS; no component hardcodes a color. --- ## Family: tracking (`@cartbase/storefront/tracking/*`) — SHIPPED Meta Pixel + GA4 + Rybbit + Consent Mode v2. The Cartbase split of duties: **this package fires client events and writes attribution; server-side CAPI / GA4 Measurement Protocol sending is Cartbase-backend-owned** (the `order.placed` forwarder). The whole family is safe to render unconditionally — every component renders nothing when its id prop is absent, every helper no-ops outside the browser. ### `` — `tracking/consent-init` - **Purpose** — the synchronous Consent Mode v2 "default" snippet: reads the `_1c_consent` cookie and sets gtag's consent default (denied when no stored choice) before any Google tag loads. - **SDK calls** — none. It must NEVER wait on a fetch: the per-store config drives the banner, not this default (async default = first-hit consent race). - **Mount rules** — FIRST child of `` in the root layout, before any tag component. Plain inline `