I have created one lightning application which I'm using in my vf page. To use lightning app in vf page I need to extends ltng:outApp but at the same time I also want to use lightning design system. How can I use both at the same time.

2 Answers 2


You don't have to do anything, extending ltng:outApp will also get you SLDS, as stated in the documentation:

Extending from ltng:outApp adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System (SLDS). If you don’t want SLDS resources added to the page, extend from ltng:outAppUnstyled instead.


Please go through the code, add the line before commenting lines of the code will resolve your problem

<apex:page id="CommercialFinance" sidebar="false" showHeader="false" standardStylesheets="false">
         <title>Commercial Finance</title>
    // Help you to have SLDS to your VF page
            * {
               margin: 0;
               padding: 0;
      <div id="CommercialFinanceDiv"></div>
         $Lightning.use("wizard3:AssetFinanceApp", function(){
                  function (cmp){
    <aura:application description="CommercialFinanceApp" extends="ltng:outApp"> 
    // extend ltng:outApp in this fashion

This might help you out.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .