DocsDocsSDKs

React SDK examples

Curated bridge to Storybook examples and live playground routes for the React SDK.

Use this route to choose live React SDK examples without treating runtime examples as package contracts.

The React SDK examples include Storybook entries, sandbox and showcase routes, and context for provider, auth, and copy-paste safety. The examples follow @enadhq/enad-react-sdk@1.9.3.

Enad docs curates the routes that are worth starting from. Storybook, sandbox, and showcase still own the live runtime behavior.

Pick the right live surface

  • Storybook owns live visual examples. Use it to verify one component, block, or composition pattern.
  • Sandbox owns the /sandbox playground runtime. Use it to test theme state, component-set behavior, and sandbox flows.
  • Showcase owns the /showcase playground runtime. Use it to review a broader visual surface without opening individual Storybook stories.
  • Enad docs guidance owns setup order, ownership boundaries, and route selection before you open a live runtime.

Read example context

Most React SDK examples are meant for runtime inspection, not direct copy/paste. A common example profile looks like this:

  • runtime: storybook
  • providerRequired: true
  • authRequired: false
  • copyPasteSafe: false

That means the example is a good place to verify behavior, but not the contract for app setup, provider options, or exact public exports.

Storyblok starting points

If the task is Storyblok-authored storefront content, start with these examples. Then return to the Storyblok storefront bridge for setup and ownership guidance.

  • CMS/Storyblok/SectionLayout · Default uses Storybook metadata with providerRequired: true and authRequired: false. Open Storybook.
  • CMS/Storyblok/SectionLayout · NarrowInverse uses Storybook metadata with providerRequired: true and authRequired: false. Open Storybook.
  • Storefront/CMS/Storyblok/BlockRenderer · WithExampleAdapters uses Storybook metadata with providerRequired: true and authRequired: false. Open Storybook.
  • Storefront/CMS/Storyblok/BlockRenderer · WithFallback uses Storybook metadata with providerRequired: true and authRequired: false. Open Storybook.

Curated examples by job

Use these when you need a fast visual starting point instead of browsing hundreds of imported stories.

  • For header and top-of-page chrome, open Storefront/Layout/Header · Default. Open Storybook.
  • For a hero-led landing page section, open Storefront/Blocks/Hero · Default. Open Storybook.
  • For an editorial gallery section, open Storefront/Blocks/Gallery · Default. Open Storybook.
  • For a composable product merchandising card, open Storefront/Blocks/ProductCard (Composable) · ComposedDefault. Open Storybook.
  • For a Search entry surface, open Search/SearchBar · Default. Open Storybook.
  • For a cart drawer review state, open Cart/CartDrawer · Closed. Open Storybook.

Playground runtime routes

These imported routes are broader runtime surfaces than a single Storybook story.

  • Use the live playground sandbox at /sandbox when you need the interactive playground runtime. Open sandbox.
  • Use the live playground showcase at /showcase when you need the broader showcase runtime. Open showcase.

Use sandbox or showcase when the question is about runtime theme state, component-set switching, or overall visual feel across a wider surface. Use Storybook when the question is about one component or one curated story.

React SDK examples

# React SDK examples Use this route to choose live React SDK examples without treating runtime examples as package contracts. The React SDK examples include Storybook entries, sandbox and showcase routes, and context for provider, auth, and copy-paste safety. The examples follow `@enadhq/enad-react-sdk@1.9.3`. > Enad docs curates the routes that are worth starting from. Storybook, sandbox, and showcase still own the live runtime behavior. ## Pick the right live surface - Storybook owns live visual examples. Use it to verify one component, block, or composition pattern. - Sandbox owns the `/sandbox` playground runtime. Use it to test theme state, component-set behavior, and sandbox flows. - Showcase owns the `/showcase` playground runtime. Use it to review a broader visual surface without opening individual Storybook stories. - Enad docs guidance owns setup order, ownership boundaries, and route selection before you open a live runtime. ## Read example context Most React SDK examples are meant for runtime inspection, not direct copy/paste. A common example profile looks like this: - `runtime: storybook` - `providerRequired: true` - `authRequired: false` - `copyPasteSafe: false` That means the example is a good place to verify behavior, but not the contract for app setup, provider options, or exact public exports. ## Storyblok starting points If the task is Storyblok-authored storefront content, start with these examples. Then return to the [Storyblok storefront bridge](/react-sdk/latest/guides/storyblok-storefront) for setup and ownership guidance. - `CMS/Storyblok/SectionLayout · Default` uses Storybook metadata with `providerRequired: true` and `authRequired: false`. [Open Storybook](https://sdk.enad.io/storybook?path=/story/cms-storyblok-section-layout--default). - `CMS/Storyblok/SectionLayout · NarrowInverse` uses Storybook metadata with `providerRequired: true` and `authRequired: false`. [Open Storybook](https://sdk.enad.io/storybook?path=/story/cms-storyblok-section-layout--narrow-inverse). - `Storefront/CMS/Storyblok/BlockRenderer · WithExampleAdapters` uses Storybook metadata with `providerRequired: true` and `authRequired: false`. [Open Storybook](https://sdk.enad.io/storybook?path=/story/storefront-cms-storyblok-block-renderer--with-example-adapters). - `Storefront/CMS/Storyblok/BlockRenderer · WithFallback` uses Storybook metadata with `providerRequired: true` and `authRequired: false`. [Open Storybook](https://sdk.enad.io/storybook?path=/story/storefront-cms-storyblok-block-renderer--with-fallback). ## Curated examples by job Use these when you need a fast visual starting point instead of browsing hundreds of imported stories. - For header and top-of-page chrome, open `Storefront/Layout/Header · Default`. [Open Storybook](https://sdk.enad.io/storybook?path=/story/storefront-layout-header--default). - For a hero-led landing page section, open `Storefront/Blocks/Hero · Default`. [Open Storybook](https://sdk.enad.io/storybook?path=/story/storefront-blocks-hero--default). - For an editorial gallery section, open `Storefront/Blocks/Gallery · Default`. [Open Storybook](https://sdk.enad.io/storybook?path=/story/storefront-blocks-gallery--default). - For a composable product merchandising card, open `Storefront/Blocks/ProductCard (Composable) · ComposedDefault`. [Open Storybook](https://sdk.enad.io/storybook?path=/story/storefront-blocks-product-card-composable--composed-default). - For a Search entry surface, open `Search/SearchBar · Default`. [Open Storybook](https://sdk.enad.io/storybook?path=/story/search-search-bar--default). - For a cart drawer review state, open `Cart/CartDrawer · Closed`. [Open Storybook](https://sdk.enad.io/storybook?path=/story/cart-cart-drawer--closed). ## Playground runtime routes These imported routes are broader runtime surfaces than a single Storybook story. - Use the live playground sandbox at `/sandbox` when you need the interactive playground runtime. [Open sandbox](https://sdk.enad.io/sandbox). - Use the live playground showcase at `/showcase` when you need the broader showcase runtime. [Open showcase](https://sdk.enad.io/showcase). Use sandbox or showcase when the question is about runtime theme state, component-set switching, or overall visual feel across a wider surface. Use Storybook when the question is about one component or one curated story. ## Related docs - [Storyblok storefront bridge](/react-sdk/latest/guides/storyblok-storefront) - [React SDK playground](/react-sdk/latest/playground) - [Playground](/playground) - [React SDK latest](/react-sdk/latest)