@enadhq/enad-react-sdk

Composable storefront UI components for building e-commerce experiences with React 19 and Next.js 16. Part of the Enad unified commerce platform.

Install

npm install @enadhq/enad-react-sdk
# or
pnpm add @enadhq/enad-react-sdk

Peer dependencies

You need these in your project:

• react >= 19
• react-dom >= 19
• next >= 16
• @tanstack/react-query >= 5

Setup

1. Import the stylesheet

Add the SDK stylesheet to your app's root layout:

import "@enadhq/enad-react-sdk/styles.css";

2. Wrap your app with EnadProvider

EnadProvider sets up React Query, the icon system, and the component resolver. Place it at the root of your component tree.

import { EnadProvider } from "@enadhq/enad-react-sdk";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <EnadProvider>{children}</EnadProvider>;
}

Provider options

| Prop | Type | Default | Description | | -------------------- | -------------------- | --------------- | -------------------------------------------------------------------------------------- | | cartAdapter | CartAdapter | — | Cart backend adapter (see Cart adapters below) | | brink | BrinkConfig | — | Deprecated. Use cartAdapter with createBrinkCartAdapter() instead | | icons | IconSlotMap | phosphorIcons | Icon set to use. Ships with phosphorIcons, lucideIcons, and hugeIcons adapters | | componentSet | ComponentSet | "default" | Base UI component set. Options: "brutalist", "editorial", "organic", "minimal" | | componentOverrides | ComponentOverrides | — | Override the component set for specific components |

Cart adapters

The SDK uses a pluggable adapter pattern for the cart backend. Pass any object that implements the CartAdapter interface. The Brink Commerce adapter ships as a separate entry point:

import { EnadProvider } from "@enadhq/enad-react-sdk";
import { createBrinkCartAdapter } from "@enadhq/enad-react-sdk/client/cart/brink-adapter";

const cartAdapter = createBrinkCartAdapter({
  env: "production",
  storeGroupId: "sg-123",
  countryCode: "SE",
  languageCode: "sv",
});

<EnadProvider cartAdapter={cartAdapter}>{children}</EnadProvider>;

A mock adapter is also available for development and testing:

import { createMockCartAdapter } from "@enadhq/enad-react-sdk/client/cart/mock-adapter";

const cartAdapter = createMockCartAdapter({ delay: 200 });

To write your own adapter for a different backend (Centra, Shopify, a custom API), implement the CartAdapter interface from client/cart:

import type { CartAdapter } from "@enadhq/enad-react-sdk/client/cart";

const myAdapter: CartAdapter = {
  getCart: () => {
    /* ... */
  },
  addItem: (productVariantId, quantity) => {
    /* ... */
  },
  updateItem: (itemId, quantity) => {
    /* ... */
  },
  removeItem: (itemId) => {
    /* ... */
  },
};

All adapter methods return a normalized Cart object. The adapter owns session management internally.

Switching icon sets

import { EnadProvider } from "@enadhq/enad-react-sdk";
import { lucideIcons } from "@enadhq/enad-react-sdk/client/icons";

<EnadProvider icons={lucideIcons}>{children}</EnadProvider>;

Package exports

The SDK is split into focused entry points for tree-shaking. Import from the specific module you need.

Choosing an import path

• Prefer the grouped domain entry points in docs and application code: client/storefront, client/cart, client/global, client/theme, client/icons, and client/search.
• Only document a narrower path when there is no grouped public barrel for that API, for example @enadhq/enad-react-sdk/client/storefront/blocks/product-card-parts.
• When you add a new component or variant, update the README examples, Storybook docs, and theme-playground registry/search in the same change so copy-paste snippets stay aligned with the supported public API.

client/global

Provider setup and top-level utilities.

import { EnadProvider, ErrorBoundary } from "@enadhq/enad-react-sdk";

client/storefront

Storefront UI components: prices, badges, ratings, variant selectors, product tabs, navigation, newsletter signup, language/country selectors, and more.

import {
  Price,
  Badge,
  StarRating,
  VariantSelector,
  ProductTabs,
} from "@enadhq/enad-react-sdk/client/storefront";

This is the preferred storefront entry point for application code. If you need a more focused path for docs, snippets, or generated examples, grouped subpaths such as @enadhq/enad-react-sdk/client/storefront/components, @enadhq/enad-react-sdk/client/storefront/blocks, and @enadhq/enad-react-sdk/client/storefront/product remain available.

Composable product card parts remain available from @enadhq/enad-react-sdk/client/storefront/blocks/product-card-parts. That path is the documented exception when you need the low-level composable pieces directly.

client/cart

Cart components, hooks, adapter interface, and normalized types.

import { CartDrawer, CartTrigger, useCart } from "@enadhq/enad-react-sdk/client/cart";
import type { CartAdapter, Cart, CartItem, Money } from "@enadhq/enad-react-sdk/client/cart";

client/cart/brink-adapter

Brink Commerce adapter. Separate entry point for tree-shaking.

import { createBrinkCartAdapter } from "@enadhq/enad-react-sdk/client/cart/brink-adapter";

client/cart/mock-adapter

In-memory mock adapter for development and testing.

import { createMockCartAdapter } from "@enadhq/enad-react-sdk/client/cart/mock-adapter";

client/search

Search functionality with the useSearch hook.

import { useSearch } from "@enadhq/enad-react-sdk/client/search";

client/icons

Pluggable icon system with adapters for Phosphor, Lucide, and Hugeicons.

import {
  Icon,
  useIcon,
  phosphorIcons,
  lucideIcons,
  hugeIcons,
} from "@enadhq/enad-react-sdk/client/icons";

client/theme

Theme codec for encoding/decoding theme hashes, CSS generation, conflict scanning, and default token values.

import {
  encodeThemeHash,
  decodeThemeHash,
  generateThemeCSS,
  SDK_DEFAULTS,
} from "@enadhq/enad-react-sdk/client/theme";

The package also ships an enad-theme CLI for theme operations:

npx enad-theme --help

client/user

User account context and hooks.

client/wishlist

Wishlist state management.

client/ui-interfaces

TypeScript interfaces for the component system.

client/ui-resolver

Component resolver that maps abstract component names to concrete implementations.

Component overview

Blocks

Content blocks for building storefront pages:

• Hero, Gallery, GalleryWithCaption, GalleryWithLinkBlocks
• TextContent, VariableTextContent, TextContentWithImage, ContentWithImageProductData
• ProductCard, ProductImage, LinkBlock, LinkBlockSmall
• ImageBlock, CardImageWithCaption, CardVideo
• AccordionBlock, Spacer, TruncatedText

Primitives

Low-level UI elements that other components build on:

• Button, Input, Select, Checkbox
• Breadcrumbs, Pagination, TextLink
• QuickLinks, DownloadItem

Product

Product-specific components:

• ColorSwatch, MaterialSelector, QuantityPicker, ProductUSP

Carousel

• SwipeableCarousel — touch-friendly carousel built on Embla

Layout

• Header, Footer, PromotionBar, MobileMenuDrawer

Filters

• FilterPanel, FilterGroup, FilterChip, SortSelect, ToggleListView

Checkout

Checkout flow components (in development).

Theming

The SDK uses CSS custom properties for all visual tokens (colors, radii, spacing). You own your brand palette — the SDK owns the interaction quality and structural patterns.

Themes are applied through CSS variables. Use the enad-theme CLI or the generateThemeCSS function to produce a theme stylesheet from a configuration object.

Light and dark modes are both first-class. The SDK respects prefers-color-scheme and supports explicit mode toggling.

Built with

• Tailwind CSS v4 — utility-first styling
• Radix UI — accessible primitives (dialogs, popovers, accordions)
• Embla Carousel — lightweight carousel engine
• React Query — data fetching and cache management
• react-hook-form + Zod — form handling and validation
• class-variance-authority — variant-driven component styles

Development

From the monorepo root:

# Build the SDK (ESM via tsup, types via tsc, styles via tailwindcss)
pnpm build --filter=@enadhq/enad-react-sdk

# Watch mode — rebuilds on file changes
pnpm dev --filter=@enadhq/enad-react-sdk

# Type check
pnpm check-types --filter=@enadhq/enad-react-sdk

# Lint
pnpm lint --filter=@enadhq/enad-react-sdk

The build has three stages:

1. tsup — bundles TypeScript to ESM (dist/*.mjs)
2. tsc — generates declaration files (dist/*.d.ts)
3. tailwindcss — compiles src/styles.css to dist/styles.css

License

MIT