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.

Caution

The public version of the lightning-base-components NPM package has been officially deprecated by Salesforce. Only internal Salesforce developers have access to any future updates to this package. This means the public package may lag behind on-platform components. You may need to mock your own lightning-* components in the future. You can learn more about mocking your own lightning-* components here.

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' with { 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.

pnpm

pnpm add @salesforce-ux/design-system

npm

npm install @salesforce-ux/design-system

yarn

yarn 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.

Caution

The public version of the lightning-base-components NPM package has been officially deprecated by Salesforce. Only internal Salesforce developers have access to any future updates to this package. This means the public package may lag behind on-platform components. You may need to mock your own lightning-* components in the future. You can learn more about mocking your own lightning-* components here.

Note

On windows, certain lightning-base-components do not work. This is a known issue with the LWR runtime.

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

pnpm

pnpm add lightning-base-components

npm

npm install lightning-base-components

yarn

yarn 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

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.