Use Salesforce Lightning Design System with LWR

You can use the Salesforce Lightning Design System (SLDS) to style your LWR site. Setting up SLDS for an LWR app lets you add base components to your app. You have to enable SLDS before you can pull over base components.

Before you can start using SLDS to customize your site, make sure your project has a layout template in your src/layouts directory. For more information, see Content and Layout Templates in LWR on Node.js.

Then, follow these steps to make SLDS available to your app.

In package.json, add a dependency on @salesforce-ux/design-system to the devDependencies section. Check npm: @salesforce-ux/design-system for the latest stable version of the package.

To ensure your project uses the latest compatible version of the SLDS package, we recommend using a script to copy SLDS resources into your app every time you run npm run build.

  1. Make sure you have a scripts folder at the top level of your project.

  2. In the scripts folder, create a new file called copy-slds.mjs and add your build script. Here’s an example script:

  3. In package.json, add a dependency on the cpx package to devDependencies and update the build script to run copy-slds.mjs. To ensure that SLDS resources copy over before your site gets built, make sure you run the copy-slds script before lwr build.

In your app’s static layout template, add or change the link to point to the SLDS stylesheets. The layout template can be an .html or a .njk file.

");else if(O._boomrl=function(){t()},O.addEventListener)O.addEventListener("load",O._boomrl,!1);else if(O.attachEvent)O.attachEvent("onload",O._boomrl);d.close()}function a(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!window.BOOMR||!window.BOOMR.version&&!window.BOOMR.snippetExecuted){window.BOOMR=window.BOOMR||{},window.BOOMR.snippetStart=(new Date).getTime(),window.BOOMR.snippetExecuted=!0,window.BOOMR.snippetVersion=12,window.BOOMR.url=n+"96ZND-LJLSH-JXHC9-F8GQP-6WCGS";var o=document.currentScript||document.getElementsByTagName("script")[0],i=!1,r=document.createElement("link");if(r.relList&&"function"==typeof r.relList.supports&&r.relList.supports("preload")&&"as"in r)window.BOOMR.snippetMethod="p",r.href=window.BOOMR.url,r.rel="preload",r.as="script",r.addEventListener("load",e),r.addEventListener("error",function(){t(!0)}),setTimeout(function(){if(!i)t(!0)},3e3),BOOMR_lstart=(new Date).getTime(),o.parentNode.appendChild(r);else t(!1);if(window.addEventListener)window.addEventListener("load",a,!1);else if(window.attachEvent)window.attachEvent("onload",a)}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var n=""=="true"?1:0,t="",a="3be5tmax2w5mu2risqwa-f-21c12fd45-clientnsv4-s.akamaihd.net",o="false"=="true"?2:1,i={"ak.v":"41","ak.cp":"1836958","ak.ai":parseInt("1224868",10),"ak.ol":"0","ak.cr":15,"ak.ipv":4,"ak.proto":"h2","ak.rid":"8a0b5255","ak.r":51095,"ak.a2":n,"ak.m":"dsca","ak.n":"essl","ak.cport":58707,"ak.gh":"23.215.214.243","ak.quicv":"","ak.tlsv":"tls1.3","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"","ak.t":"1781044268","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==rbeNdE7nO45z1cNlOuAWM2qJAds+Id4+z/R6GTf3ZI8rB5BOQXRVrBuhXVF75CdRUO0rNbU/EiCb2Lisoaq8fX+B1TB9qVJTh6uH3sRCNfR3OCSnJQSEx1QFgZgv7tVhnVW6AD6s1TLvMyQsc4OzDlnGzQVYnsizTLPeGgpq02hGFOmwQ0gJZmLRBeP23EL3T5hy2YDQyvK2Y8e9JWxYaWMXRljpAqAPsvNW7QsopjXsPJVgiUPGtpyG2MuDQm/DTrtIYtmTxe9jJ46nrz4tx3sXs9Rq7BBJGNwxAtkduQTHyShD5RygqYxhAY7s9IBeNRexFl2rjqc0ItdbQ3ffu8BR4WuMl3Sl331PoXW/aKG+Vvn2EbzQ2jP858ks1lDo5izRaeEa7HdsVPStUX8KunSTC9njVZjmEXxg4/3B+xY=","ak.pv":"87","ak.dpoabenc":"","ak.tf":o};if(""!==t)i["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))i["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(i)},rv:function(){var e=["ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:i,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window); {{ body | safe }} // context object property, {{ lwr_resources | safe }} ">

For more information about the context object properties body and lwr_resources, see Compile-Time Data: LWR

  1. In the routes section of the file, configure the bootstrap property to set the syntheticShadow property to true. Enabling syntheticShadow lets the SLDS stylesheet function as global styles.

  2. If they don’t already exist, add the /assets and /utility-sprite paths to SLDS stylesheets and images, respectively, to allow browser access.

If you initialized your project as a git repo, this step applies to you!

The LWR build command generates a few very large folders in your repo. For example, LWR creates two assets folders (that each contain over 4,000 files) in your project directory at build time.

To easily avoid adding unnecessary content to your repo, we recommend revising your .gitignore to exclude certain folders.

Run the following terminal commands from the root of your project:

Read Get Started with LWR for details on LWR’s NPM commands.

Open the site at http://localhost:3000. If you’re already using port 3000 for something else, review your terminal output for the alternative port being used.

Now that you’ve set up SLDS for your LWR site, you can configure your app to use Lightning base components. Base components run on SLDS, so you have to enable SLDS before you can add components to your site.

To start adding LWC to your LWR app, take a look at Use Lightning Base Components with LWR on Node.js.