Mode 2 — SDK overview

The SDK gives you the data and the logic to build your own bundle UI: fetch bundles, drive a builder state machine, compute prices locally, and produce a ready-to-use cart payload. Kitenzo handles validation, pricing and the cart contract; you own every pixel.

Two packages

@kitenzo/core

Framework-agnostic. The KitenzoClient, the builder state machine (createBundleBuilder), local pricing (calculatePrice, formatMoney), cart helpers and all TypeScript types. Zero runtime dependencies.

core reference →

@kitenzo/react

Re-exports all of core, and adds KitenzoProvider, hooks (useBundle, useBundleBuilder, useBundlePrice, useBundleCart, …) and the BundleEmbed component.

react reference →

One install for React

@kitenzo/react depends on @kitenzo/core, so React consumers install only @kitenzo/react and import everything from it.

Install

# React storefronts
npm install @kitenzo/react

# Non-React (vanilla, Vue, Svelte, server scripts)
npm install @kitenzo/core

Both packages are version 0.2.6 and published publicly to npm. @kitenzo/react peer-depends on react >= 18 and react-dom >= 18 (optional @shopify/hydrogen-react >= 2024.0.0).

The shape of a custom build

1. Provide the client

Wrap your app in <KitenzoProvider apiKey> (or new KitenzoClient() directly).

2. Fetch + build

useBundle loads the bundle; useBundleBuilder tracks the customer’s selection and validity.

3. Price locally

useBundlePrice computes the discounted price instantly as selections change — no API call.

4. Add to cart

useBundleCart submits the selection; addBundleToCart writes lines + _bundles to Shopify.

Quickstart: SDK mode A working bundle page in a few steps.