Enad React SDK
116 components across 4 categories. Every example is a live sandbox you can edit.
Categories
Base UI
Foundational UI primitives built on Radix UI and styled with slot recipes
Storefront
Storefront building blocks, primitives, and content sections for navigation, product pages, and editorials
Commerce
Product-specific components for pricing, selection, ratings, and cart experiences
Layout
Structural and loading primitives for skeletons, infinite scroll, and lightboxes
Quick Links
Runtime theming
Keep EnadProvider at the app root. Add EnadThemeProvider around the subtree that should restore a component set or a shared theme hash.
componentSetswitches the structural set.hashrestores a shared playground theme.tokensapplies direct runtime overrides.
The export guide now prefers a hash-based setup snippet when the current playground state has non-default theme data, so the copied setup can restore the same component set and token overrides in one step.
Connected product happy path
Use the storefront primitives when your app already owns product data and selection state. Step up to the connected search wrappers when you want the SDK to resolve search-backed product data and map it into those same presentational surfaces.
- Stay on
ProductCard,ProductRecommendations, andVariantSelectorwhen the page already owns product data, variants, and loading states. - Use
SearchProductCard,SearchProductRecommendations, andSearchProductVariantSelectorwhen the SDK should own the Search GraphQL lookup and mapping step. - Drop to the matching
useSearchProduct*hook when the page needs a custom loading, empty, or error shell. - Drop below React to
@enadhq/enad-ts-sdk/searchwhen a non-React layer needs the shared search-domain contract.
Presentational card for pages that already own product data.
Connected wrapper when the SDK should resolve the search-backed product.
Connected recommendation section for SKU, category, tag, or brand driven rails.
Presentational section shell when the page already owns the recommendation products.
Presentational picker when the page already owns variant axes and selection state.
Connected selector when the SDK should derive the variant model from a search product.
Try It Out
Button Variants
Card with Content
Form Controls
Quick Links
Component Playground
Open the focused runtime surfaces when you want to stress-test component variants, live data, or page compositions. The docs overview stays lightweight by default.