Skip to content
LWC Garden

Lightning Base Components

LWC Garden comes with out of the box support for SLDS and is easy to pair with the official lightning-base-components NPM package.

Enable SLDS

There are a few short steps to get SLDS up and running.

LWC Garden Configuration

Enabling SLDS is a simple flag in your garden.config.js file.

garden.config.js
import lwrConfig from './lwr.config.json' assert { type: 'json' }


/**
 * @type {import('@lwc-garden/core/types').GardenConfig}
 */
const CONFIG = {
  // lwc.config.json modules type
  modules: [...lwrConfig.lwc.modules],
  lwc {
    enableSlds: true
  }
}


export default CONFIG

Install @salesforce-ux/design-system

@salesforce-ux/design-system is where the Salesforce Lightning Design System lives off platform. This can be installed via npm.

Terminal window
pnpm add @salesforce-ux/design-system

You must also edit your lwr.config.json file to configure the path to SLDS.

lwr.config.json
{
  "lwc": {
    "modules": []
  },
  "moduleProviders": [],
  "assets": [
    {
      "dir": "./.garden/slds",
      "urlPath": "/slds"
    }
  ],
  "routes": []
}

Lightning Base Components

Most on-platform components can be used locally in LWC Garden. See the official lightning-base-components README.md for a list of available LWCs.

You can build your own mock lightning-* components if you need, read more.

Terminal window
pnpm add lightning-base-components

To get these components working you will need to adjust your lwr.config.json file.

lwr.config.json
{
  "lwc": {
    "modules": [
      { "npm": "lightning-base-components" }
    ]
  },
  "moduleProviders": [],
  "assets": [],
  "routes": []
}

Windows support

By default, Salesforce does not offer proper Windows support due to bugs in their @lwrjs/* packages.

We can add native windows support (no need for WSL) via @lukethacoder/lwrjs-module-registry. This package is an opinionated edit that fixes Windows specific issues as well as a few other bugs.

Install

Terminal window
pnpm add @lukethacoder/lwrjs-module-registry

Configuration

In your package.json, add the following override.

{
  "pnpm": {
    "overrides": {
      "@lwrjs/module-registry": "npm:@lukethacoder/lwrjs-module-registry"
    }
  }
}

NOTE: this is for pnpm. NPM and Yarn have a similar overrides method.