All WorkDeveloper Tool · Component Library
Unstyled, typed React primitives for headless Shopify storefronts. Platform-agnostic core, typed against Storefront API shapes, ready to skin with your design system.
5 Primitives100% Typed · Storefront API0kb CSS shippedMIT License
Zero styling opinions
Bring your design system. The commerce logic is done.
Every primitive handles state, a11y, and Storefront API wiring — cart mutations, option selection, availability — and renders whatever markup you give it.
product-card.tsx
import { ProductProvider, VariantSelector, AddToCart } from '@juanify/storefront-kit'; export function ProductCard({ product }) { return ( <ProductProvider product={product}> <VariantSelector // headless — renders your UI renderOption={opt => <Chip {...opt} />} /> <AddToCart optimistic>Add to bag</AddToCart> </ProductProvider> ); }
What's Inside
Primitives, not opinions
Each package solves one commerce problem completely — and nothing else. Compose what you need, tree-shake the rest.
@storefront-kit/productProduct & Variants
Option selection, availability resolution, price formatting — with selected-variant state handled for you.
@storefront-kit/cartCart
Optimistic cart mutations against the Storefront API with automatic reconciliation and error rollback.
@storefront-kit/searchSearch & Filtering
Predictive search and faceted filtering primitives with URL-synced state.
@storefront-kit/checkoutCheckout Handoff
Clean handoff into Shopify checkout with cart attributes, discounts, and locale preserved.
@storefront-kit/a11yAccessibility Core
Focus management, ARIA wiring, and keyboard interaction shared by every primitive. WAI-ARIA patterns by default.
@storefront-kit/testingTest Utilities
Mock Storefront API responses and provider harnesses, so storefront logic is testable without a store.
Design Principles
Why it exists
01
Headless means headless
No className props to fight, no CSS to override. Primitives render your markup via render props and slots — the library owns behavior, you own every pixel.
02
Typed against the API
Every prop and payload is generated from Storefront API schema. When Shopify ships a new API version, the kit re-generates and your compiler finds the breakage.
03
Boring on purpose
Commerce state is the same problem in every build. Solve it once, correctly — optimistic updates, race conditions, a11y — and stop rebuilding it per client.
