For Salesforce Lightning Design System, it says it does not support Could we use Salesforce Lightning Design System in VF pages with VF markup??

1 Answer 1


Short answer is yes.

You can use this in Visualforce because SLDS is piece of CSS modified for the Lightning.

But as well know Visualforce use different piece of CSS so when you use SLDS with standard css they will overwrite each other and in some place you will get a messy output.

That part you need to handle yourself. So I suggest you if you use SLDS then set standardstylesheets="false" and then use SLDS. Then with some quick fix you will be able to create a good looking UI.

Few points from SF official support

  • To use the Design System in Visualforce you need to create a CSS file with a custom scoped outer wrapper. A tool to create your custom CSS is available here.

  • If you want to dive straight in, here are a few things to note when working with the Lightning Design System in Visualforce:

  • When using the component sample code from this site, be sure to replace all static resource paths with the Visualforce URLFOR syntax, as summarized in the FAQ.

  • Apex tags such as <apex:pageblock> and <apex:inputField> are not yet supported for use with the Lightning Design System. The Trailhead unit on visualforce development within Lightning explains options for styling legacy code to look like the new Lightning UI. For best results with the Lightning Design System, use the markup style as outlined in the component examples, and use JavaScript Remoting, Remote Objects or a similar API for data access.

  • To use the SVG spritemap icons, add the attributes xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" to the element as documented in the Trailhead module. Do not add the attributes to individual elements as can cause a page rendering bug.

  • To use SVG spritemap image icons with Internet Explorer, use the svg4everybody script.

  • Currently, if you need to use the Salesforce header or sidebar, you can not specify the xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" on the element. In this case, the SVG icons are not supported.

  • can you explain the #4, when you say: Apex tags such as and are not yet supported for use with the Lightning Design System.
    – DDhar
    Commented Jul 6, 2016 at 9:04
  • @DDhar SFSE code format remove the word. I have added them again. so basically pageblock and Iputfield doesn't support lightning. So you can use Input or inputText. Commented Jul 6, 2016 at 9:10

You must log in to answer this question.

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