Full example

// main.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { CartProvider, initStorefrontClient } from "@colossal-sh/storefront-sdk";
import App from "./App";

initStorefrontClient();

const queryClient = new QueryClient();

function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <CartProvider storeUid="your-store-uid" currency="USD">
        <App />
      </CartProvider>
    </QueryClientProvider>
  );
}

// ProductGrid.tsx
import { useProducts, useCartContext } from "@colossal-sh/storefront-sdk";

function ProductGrid({ storeUid }: { storeUid: string }) {
  const { products, isLoading } = useProducts(storeUid, "USD");
  const { addItem } = useCartContext();

  if (isLoading) return <p>Loading products...</p>;

  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map((product) => (
        <div key={product.uid} className="border rounded p-4">
          {product.images[0] && (
            <img src={product.images[0]} alt={product.name} />
          )}
          <h3>{product.name}</h3>
          <p>{product.formattedPrice}</p>
          <button onClick={() => addItem(product.uid)}>
            Add to cart
          </button>
        </div>
      ))}
    </div>
  );
}

// CartDrawer.tsx
import { useCartContext, formatPrice } from "@colossal-sh/storefront-sdk";

function CartDrawer() {
  const {
    items,
    subtotal,
    currency,
    isOpen,
    closeCart,
    removeItem,
    updateQuantity,
  } = useCartContext();

  if (!isOpen) return null;

  return (
    <div className="fixed right-0 top-0 w-80 h-full bg-white shadow-lg p-4">
      <button onClick={closeCart}>Close</button>
      <h2>Cart</h2>
      {items.map((item) => (
        <div key={item.uid} className="flex justify-between py-2">
          <div>
            <p>{item.name}</p>
            <p>{formatPrice(item.price, currency)} x {item.quantity}</p>
          </div>
          <div>
            <button onClick={() => updateQuantity(item.uid, item.quantity + 1)}>+</button>
            <button onClick={() => updateQuantity(item.uid, item.quantity - 1)}>-</button>
            <button onClick={() => removeItem(item.uid)}>Remove</button>
          </div>
        </div>
      ))}
      <p className="font-bold mt-4">Subtotal: {formatPrice(subtotal, currency)}</p>
    </div>
  );
}

// Checkout.tsx
import { useCartContext, useCreateCheckoutSession } from "@colossal-sh/storefront-sdk";

function Checkout() {
  const { cartId, itemCount } = useCartContext();
  const createSession = useCreateCheckoutSession();

  const handleCheckout = async () => {
    if (!cartId) return;
    const result = await createSession.mutateAsync({ cartUid: cartId });

    if (result.success && result.data?.checkoutUrl) {
      window.location.href = result.data.checkoutUrl;
    }
  };

  return (
    <button onClick={handleCheckout} disabled={itemCount === 0}>
      Checkout ({itemCount} items)
    </button>
  );
}