Add a module

Install, configure, and use modules in your 86d store. Add functionality like carts, reviews, and analytics in minutes by editing one config file.

Modules are the building blocks of an 86d store. Every feature (cart, reviews, blog, newsletter, checkout) ships as an independent module that you opt into by listing it in your store’s config.json. When you add a module, its components become available immediately in your MDX templates. No manual imports, no boilerplate.

Find a module

Browse first-party modules at npmjs.com, explore the Module catalog, or list everything in your local registry from the CLI:

86d module search             # list every registry module
86d module search payment     # filter by name, description, or category
86d module list               # show locally installed modules

Official 86d modules follow the @86d-app/<name> naming convention (for example @86d-app/reviews, @86d-app/blog). You can also use any npm package or GitHub repository that follows the 86d module contract.

Add a registered module

The fastest way to add a module is 86d module add. The CLI downloads the module, fetches its required dependencies, runs bun install, and enables it in the active template.

1. Run module add

   86d module add reviews
   

   The command accepts the short name (reviews), the fully scoped name (@86d-app/reviews), a GitHub specifier (github:owner/repo/modules/loyalty), or an npm specifier (npm:@acme/commerce-module). See 86d module add for the full grammar.

2. Regenerate module bindings

   86d generate
   

   This rewires module imports, the API router, and the MDX component registry so the new module is available in your store.

3. Use the components in MDX

   The module’s components are now registered. Drop them into any MDX template:

   products/[slug]/layout.mdx

   <ProductDetail slug={props.slug} />
   <ProductReviews productId={props.slug} />
   

Add a module by editing config.json

You can also add modules manually by listing them in the active template’s config.json. This is useful when you are scripting deployments or want to audit changes through a pull request.

1. Edit config.json

   Open your active template’s config.json and append the package name to the modules array:

   templates/<theme>/config.json

   {
     "modules": [
       "@86d-app/cart",
       "@86d-app/products",
       "@86d-app/reviews"
     ]
   }
   
2. Install the package (if it is not a workspace module)

   If the module is a published npm package that is not in your workspace, install it:

   npm install @86d-app/reviews
   

   Workspace modules under modules/ are already on disk, so this step is unnecessary for first-party modules.

3. Run codegen

   86d generate
   

   The generator detects which packages are workspace-local and which are public npm packages, installs the public ones if needed, and writes static imports into modules.ts.

Set per-module options

Many modules accept configuration options that control their behavior. Pass these via the moduleOptions key in config.json:

{
  "modules": [
    "@86d-app/cart",
    "@86d-app/reviews"
  ],
  "moduleOptions": {
    "@86d-app/cart": {
      "guestCartExpiration": 604800000,
      "maxItemsPerCart": 100
    }
  }
}

Each module documents its accepted options in its README on npm and on its dedicated docs page (for example, Carts). The keys inside moduleOptions must match the exact npm package name.

Use external npm packages

You are not limited to @86d-app/* modules. Any npm package that exports React or MDX components and follows the 86d module contract can be listed:

{
  "modules": [
    "@86d-app/cart",
    "@some-company/analytics-widget",
    "react-product-carousel"
  ]
}

86d generate detects which packages are workspace-local (@86d-app/*) and which are public npm packages, installs the public ones automatically, and adds them to package.json.

Remove a module

1. Disable the module

   86d module disable reviews
   

   This removes the module from config.json. If config.json had "modules": "*", the CLI converts it to an explicit list with reviews excluded.

2. Regenerate

   86d generate
   

   The codegen run drops the module from modules.ts, the API router, and the MDX component registry.

3. Optionally uninstall the package

   If the module is a workspace package, leave it in modules/; you may want to enable it again later. If it is a published npm package and you no longer need it, uninstall it:

   npm uninstall @86d-app/reviews
   

Next steps

• Build a custom module to add bespoke functionality.
• Module catalog for the full list of available modules.
• config.json reference for every supported field.