Developers
You bring the UI. We handle the data.
Kitenzo runs selection state, validation, pricing, discounting and cart compilation behind a typed React SDK. You write the interface, in your repo, in your design system, and it checks out natively on Shopify.
Built for agency teams, in-house developers, specialist studios, and independent Shopify developers.
$ npm install @kitenzo/react
import { KitenzoProvider, useBundle, useBundleBuilder,
useBundlePrice, useBundleCart } from '@kitenzo/react'
function Bundle({ bundleId }) {
const { bundle } = useBundle(bundleId)
const { selections, addItem, isComplete, errors } =
useBundleBuilder(bundle)
const { formattedDiscountedPrice, hasDiscount } =
useBundlePrice(bundle, selections)
const { addBundleToCart } = useBundleCart()
// your markup, your design system, your call
}The SDK
Six hooks, one provider, zero UI opinions.
@kitenzo/react wraps @kitenzo/core, a dependency-free client that runs anywhere with fetch: browsers, Node, Workers, Deno. Both are MIT licensed and published on npm.
useBundle(id)
Fetches a bundle with its sections, products and variants already merged. Accepts initialData for SSR hydration.
useBundleBuilder(bundle)
Selection state machine. Add, remove and update quantities; read isSectionValid, isComplete and a typed list of validation errors.
useBundlePrice(bundle, selections)
Calculates price locally as selections change. No API call, no loading state. Flat and tiered discounts, formatted in the shop currency.
useBundleCart()
Submits a configuration and returns cart-ready lines plus the _bundles attribute that drives discounting at checkout.
useBundles()
Lists the published bundles on the shop.
useSettings()
Shop currency, money format and the features active on the account.
Prefer no UI code at all? <BundleEmbed /> renders the full admin-configured experience, Conditions Engine included, from one component.
Delivery
It ships onto the theme you already have.
A custom bundle experience does not require replatforming to Hydrogen. The widget is a React app that mounts inside a normal Shopify theme, and the engine it talks to is the same one running on Liquid storefronts today.
Agencies, studios, and independent developers can work in their own repository, own the presentation code, and ship on their own schedule. Kitenzo owns the engine.
Build it as a normal React app
TypeScript, Vite, your component library. Design tokens live in one file, so restyling for a brand is mostly that file.
Bundle to two files
A self-contained IIFE with React and the SDK inlined, plus one stylesheet. No separate hosting and no headless storefront.
Mount from a Liquid section
The section renders the mount element and passes configuration through data attributes, so copy and imagery stay editable in the theme editor.
Check out natively
Adds to the theme cart with the _bundles attribute. A Shopify Cart Transform function prices it, so payment providers see an ordinary checkout.
The boundary
A clear line between your code and ours.
You write
Kitenzo runs
Layout, components and styling
Bundle definitions and sections
Routing, i18n and SSR
Selection state and validation
Cart mutations on your storefront
Pricing, discounts and tiers
Analytics and experimentation
Cart payload and checkout discounting
Worth knowing
What we would want to know before we started.
Conditions Engine in custom UIs
Visual if/then rules run today in the embed and in Liquid themes. A custom SDK build reads whether a bundle uses conditions and drives that logic itself. Full parity is on the roadmap, so tell us if you need it.
Access is granted, not self-serve
The headless API is enabled per shop. Talk to us and we will turn it on, mint your keys and set the allowed origins with you.
Versioning
The API is v1. The npm packages are pre-1.0 and follow semver, so pin them. Keys are publishable, scoped to origins you nominate, and rate limited per key.
Tell us what you want to build.
We will enable the headless API on your shop, set up keys, and walk your team or your agency through the first build.